Obter a lista de classes do elemento com o jQuery

Existe uma maneira em jQuery para fazer loop através ou atribuir a um array todas as classes que são atribuídas a um elemento?

ex.

<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>
Vou procurar uma classe "especial" como em "dolor_spec" acima. Eu sei que eu poderia usar hasClass() mas o verdadeiro nome da classe pode não ser necessariamente conhecido no momento.

Author: Mark Amery, 2009-08-04

17 answers

Pode usar document.getElementById('divId').className.split(/\s+/); para obter uma série de nomes de classes.

Então, podes iterar-te e encontrar o que quiseres.
var classList = document.getElementById('divId').className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
    if (classList[i] === 'someClass') {
        //do something
    }
}
O JQuery não te ajuda muito aqui...
var classList = $('#divId').attr('class').split(/\s+/);
$.each(classList, function(index, item) {
    if (item === 'someClass') {
        //do something
    }
});
 647
Author: redsquare, 2015-09-22 22:06:42
Porque é que ninguém apareceu na lista?
$(element).attr("class").split(' ');
 229
Author: Dreamr OKelly, 2017-05-23 12:05:53

Aqui está um 'plugin' jQuery que irá devolver uma lista de todas as classes que os elementos correspondentes têm

;!(function ($) {
    $.fn.classes = function (callback) {
        var classes = [];
        $.each(this, function (i, v) {
            var splitClassName = v.className.split(/\s+/);
            for (var j = 0; j < splitClassName.length; j++) {
                var className = splitClassName[j];
                if (-1 === classes.indexOf(className)) {
                    classes.push(className);
                }
            }
        });
        if ('function' === typeof callback) {
            for (var i in classes) {
                callback(classes[i]);
            }
        }
        return classes;
    };
})(jQuery);

Usa-o como

$('div').classes();

No seu caso devolve

["Lorem", "ipsum", "dolor_spec", "sit", "amet"]

Você também pode passar uma função para o método a ser chamado em cada classe

$('div').classes(
    function(c) {
        // do something with each class
    }
);
Aqui está um jsFiddle que preparei para demonstrar e testar. http://jsfiddle.net/GD8Qn/8/

Javascript Minificado

;!function(e){e.fn.classes=function(t){var n=[];e.each(this,function(e,t){var r=t.className.split(/\s+/);for(var i in r){var s=r[i];if(-1===n.indexOf(s)){n.push(s)}}});if("function"===typeof t){for(var r in n){t(n[r])}}return n}}(jQuery);
 133
Author: Will, 2016-10-07 13:54:37

Nos navegadores de suporte, pode usar elementos DOM' classList propriedade.

$(element)[0].classList

É um objeto em forma de matriz listando todas as classes que o elemento tem.

Se você precisar de suportar versões antigas do navegador que não suportam a propriedade classList, a página MDN ligada também inclui um shim para ele - embora mesmo o shim não irá funcionar nas versões do Internet Explorer abaixo do IE 8.

 119
Author: Pehmolelu, 2014-12-17 23:36:02
Devias experimentar este.
$("selector").prop("classList")

Devolve uma lista de todas as classes actuais do elemento.

 54
Author: P.Petkov, 2016-09-01 15:35:04
var classList = $(element).attr('class').split(/\s+/);
$(classList).each(function(index){

     //do something

});
 14
Author: Carlisle, 2012-05-09 12:52:04
$('div').attr('class').split(' ').map(function(cls){ console.log(cls);})
 7
Author: alexche8, 2013-11-25 13:41:38

Actualizar:

Como @Ryan Leonard disse correctamente, a minha resposta não corrige o que eu disse... Você precisa tanto aparar e remover espaços duplos com (por exemplo) string.substituir (/ +/g,"").. Ou podes dividir o el.className e, em seguida, remover valores vazios com (por exemplo) arr.filtro (booleano).
const classes = element.className.split(' ').filter(Boolean);

Ou mais moderno

const classes = element.classList;

Velho:

Com todas as respostas dadas, nunca se deve esquecer do utilizador .aparar () (ou $.trim ())

Porque as classes são adicionadas e removidas, pode acontecer que existam vários espaços entre a cadeia de classes.. por exemplo, "classe 1 classe 2 classe3"..

Isto se transformaria em ['class1', 'class2',",",", 'class3']..

Quando se usa o trim, todos múltiplo os espaços são removidos..

 5
Author: DutchKevv, 2017-11-19 00:49:45
Talvez isto também te possa ajudar. Eu usei esta função para obter classes de elementos childern..
function getClickClicked(){
    var clickedElement=null;
    var classes = null;<--- this is array
    ELEMENT.on("click",function(e){//<-- where element can div,p span, or any id also a class
        clickedElement = $(e.target);
        classes = clickedElement.attr("class").split(" ");
        for(var i = 0; i<classes.length;i++){
            console.log(classes[i]);
        }
        e.preventDefault();
    });
}

No seu caso você quer doler_ipsum classe u pode fazer assim agora calsses[2];.

 3
Author: Phoenix, 2016-02-23 20:49:43
Experimenta Isto. Isto lhe dará os nomes de todas as classes de todos os elementos do documento.
$(document).ready(function() {
var currentHtml="";
$('*').each(function() {
    if ($(this).hasClass('') === false) {
        var class_name = $(this).attr('class');
        if (class_name.match(/\s/g)){
            var newClasses= class_name.split(' ');
            for (var i = 0; i <= newClasses.length - 1; i++) {
                if (currentHtml.indexOf(newClasses[i]) <0) {
                    currentHtml += "."+newClasses[i]+"<br>{<br><br>}<br>"
                }
            }
        }
        else
        {
            if (currentHtml.indexOf(class_name) <0) {
                currentHtml += "."+class_name+"<br>{<br><br>}<br>"
            }
        }
    }
    else
    {
        console.log("none");
    }
});
$("#Test").html(currentHtml);

});

Aqui está o exemplo de trabalho: https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

 2
Author: Sumit Raju, 2016-01-04 07:11:53

Obrigado por isto - eu estava a ter um problema semelhante, porque estou a tentar programaticamente relacionar objectos irá hierarquizar nomes de classes, mesmo que esses nomes possam não ser necessariamente conhecidos pelo meu script.

No meu script, quero uma marca <a> para ligar/desligar o texto de ajuda, dando a marca <a> [some_class] mais a classe de toggle, e depois dando-lhe o texto de ajuda a classe de [some_class]_toggle. Este código encontra com sucesso os elementos relacionados usando jQuery:

$("a.toggle").toggle(function(){toggleHelp($(this), false);}, function(){toggleHelp($(this), true);});

function toggleHelp(obj, mode){
    var classList = obj.attr('class').split(/\s+/);
    $.each( classList, function(index, item){
    if (item.indexOf("_toggle") > 0) {
       var targetClass = "." + item.replace("_toggle", "");
       if(mode===false){$(targetClass).removeClass("off");}
       else{$(targetClass).addClass("off");}
    }
    });
} 
 1
Author: Alan L., 2011-10-20 18:02:14

O Javascript fornece um atributo classList para um elemento de nó no dom. Simplesmente utilizar

  element.classList

Devolverá um objecto da forma

  DOMTokenList {0: "class1", 1: "class2", 2: "class3", length: 3, item: function, contains: function, add: function, remove: function…}

O objecto tem funções como contém, Adicionar, Remover que pode usar

 0
Author: Anuj J, 2014-02-25 12:09:52

Eu tinha um problema semelhante, para um elemento de Imagem Tipo. Precisava de verificar se o elemento era de uma certa classe. Primeiro tentei com:

$('<img>').hasClass("nameOfMyClass"); 

Mas eu tenho um bom "esta função não está disponível para este elemento".

Então eu inspecionei meu elemento no DOM explorer e vi um atributo muito bom que eu poderia usar: className. Continha os nomes de todas as classes do meu elemento separadas por espaços em branco.

$('img').className // it contains "class1 class2 class3"
Assim que ouvires isto, divide o texto como normal. No meu caso, funcionou.
var listOfClassesOfMyElement= $('img').className.split(" ");

Estou assumindo que isto funcionaria com outros tipos de elementos (além do img).

Espero que ajude.
 0
Author: eva, 2016-10-03 13:24:39

Um pouco tarde, mas usando a função extend () permite-lhe chamar "hasClass ()" em qualquer elemento, por exemplo.:
var hasClass = $('#divId').hasClass('someClass');

(function($) {
$.extend({
    hasClass: new function(className) {
        var classAttr = $J(this).attr('class');
        if (classAttr != null && classAttr != undefined) {
            var classList = classAttr.split(/\s+/);
            for(var ix = 0, len = classList.length;ix < len;ix++) {
                if (className === classList[ix]) {
                    return true;
                }
            }
        }
        return false;
    }
}); })(jQuery);
 -3
Author: gesellix, 2010-06-21 09:35:04
A questão é o que a Jquery é projectada para fazer.
$('.dolor_spec').each(function(){ //do stuff

E porque é que ninguém deu .encontrar () como resposta?

$('div').find('.dolor_spec').each(function(){
  ..
});

Existe também a classList para navegadores não-IE:

if element.classList.contains("dolor_spec") {  //do stuff
 -3
Author: john ktejik, 2014-11-14 00:15:08
Aqui está, apenas a resposta de readsquare para devolver uma série de todas as classes:
function classList(elem){
   var classList = elem.attr('class').split(/\s+/);
    var classes = new Array(classList.length);
    $.each( classList, function(index, item){
        classes[index] = item;
    });

    return classes;
}

Passar um elemento jQuery para a função, de modo que uma chamada de amostra será:

var myClasses = classList($('#myElement'));
 -4
Author: Gregra, 2012-02-22 10:14:08
Sei que é uma pergunta antiga, mas ainda assim.
<div id="specId" class="Lorem ipsum dolor_spec sit amet">Hello World!</div>

var className=".dolor_spec" //dynamic

Se quiser manipular o elemento

$("#specId"+className).addClass('whatever');

Se quiser verificar se o elemento tem Classe

 $("#specId"+className).length>0

Se várias classes

//if you want to select ONE of the classes
var classNames = ['.dolor_spec','.test','.test2']
$("#specId"+classNames).addClass('whatever');
$("#specId"+classNames).length>0
//if you want to select all of the classes
var result = {className: ""};
classNames.forEach(function(el){this.className+=el;},result);
var searchedElement= $("#specId"+result.className);
searchedElement.addClass('whatever');
searchedElement.length>0
 -4
Author: dulebov.artem, 2015-05-25 19:49:29