Obter lista de classes para o elemento com jQuery

Existe uma maneira no jQuery de percorrer ou atribuir a uma matriz todas as classes 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 nome da classe real pode não ser necessariamente conhecido no momento.

Você pode usar document.getElementById('divId').className.split(/\s+/);para obter uma matriz de nomes de classe.

Em seguida, você pode iterar e encontrar o que deseja.

var classList = document.getElementById('divId').className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
    if (classList[i] === 'someClass') {
        //do something
    }
}

jQuery realmente não ajuda você aqui ...

var classList = $('#divId').attr('class').split(/\s+/);
$.each(classList, function(index, item) {
    if (item === 'someClass') {
        //do something
    }
});

Por que ninguém simplesmente listou.

$(element).attr("class").split(/\s+/);

EDIT: Como o @MarkAmery aponta, você não pode apenas .split(' ')porque os nomes das classes podem ser separados por qualquer tipo de espaço em branco.

Nos navegadores de suporte, você pode usar a classListpropriedade dos elementos DOM .

$(element)[0].classList

É um objeto de matriz que lista todas as classes que o elemento possui.

Se você precisar oferecer suporte a versões antigas de navegadores que não suportam a classListpropriedade, a página MDN vinculada também incluirá um calço para ela - embora mesmo o calço não funcione nas versões do Internet Explorer abaixo do IE 8.

Aqui está um plugin jQuery que retornará uma matriz de todas as classes que os elementos correspondentes possuem

;!(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);

Use-o como

$('div').classes();

No seu caso retorna

["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 eu configurei para demonstrar e testar http://jsfiddle.net/GD8Qn/8/

Javascript reduzido

;!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);

Você deve tentar este:

$("selector").prop("classList")

Retorna uma matriz de todas as classes atuais do elemento.

var classList = $(element).attr('class').split(/\s+/);
$(classList).each(function(index){

     //do something

});

Atualizar:

Como @Ryan Leonard apontou corretamente, minha resposta realmente não corrige o que eu disse ... Você precisa aparar e remover espaços duplos com (por exemplo) string.replace (/ + / g, "") .. Ou você pode dividir o el.className e remover valores vazios com (por exemplo) arr.filter (booleano).

const classes = element.className.split(' ').filter(Boolean);

ou mais moderno

const classes = element.classList;

Velho:

Com todas as respostas fornecidas, você nunca deve esquecer do usuário .trim () (ou $ .trim ())

Como as classes são adicionadas e removidas, pode acontecer que haja vários espaços entre as strings da classe. Por exemplo, 'class1 class2 class3' ..

Isso se transformaria em ['class1', 'class2', '', '', '', 'class3'] ..

Quando você usa o recorte, todos os vários espaços são removidos.

$('div').attr('class').split(' ').each(function(cls){ console.log(cls);})

Isso pode ajudá-lo também. Eu usei essa função para obter classes de elemento 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 a classe doler_ipsum que você pode fazer assim agora calsses[2];.

Obrigado por isso - eu estava tendo um problema semelhante, pois estou tentando relacionar objetos de forma programática com nomes de classes hierárquicos, mesmo que esses nomes não sejam necessariamente conhecidos pelo meu script.

No meu script, quero que uma <a>tag ative / desative o texto de ajuda, atribuindo a <a>tag [some_class]mais a classe de togglee, em seguida, dando a ela o texto de ajuda da classe [some_class]_toggle. Este código está localizando com sucesso os elementos relacionados usando o 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");}
    }
    });
} 

Tente isto. Isso fornecerá 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/

Eu tive um problema semelhante, para um elemento do tipo imagem. Eu precisava verificar se o elemento era de uma determinada classe. Primeiro eu tentei com:

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

mas recebi uma boa "esta função não está disponível para este elemento".

Depois, inspecionei meu elemento no explorador DOM e vi um atributo muito bom que eu poderia usar: className. Ele continha os nomes de todas as classes do meu elemento separadas por espaços em branco.

$('img').className // it contains "class1 class2 class3"

Depois de conseguir isso, basta dividir a corda como de costume.

No meu caso, isso funcionou:

var listOfClassesOfMyElement= $('img').className.split(" ");

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

Espero que ajude.

javascript fornece um atributo classList para um elemento de nó no dom. Simplesmente usando

  element.classList

retornará um objeto de formulário

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

O objeto possui funções como contém, adiciona e remove as quais você pode usar

Um pouco atrasado, mas o uso da função extend () permite 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);

A questão é o que o Jquery foi projetado para fazer.

$('.dolor_spec').each(function(){ //do stuff

E por que ninguém deu .find () como resposta?

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

Também há classList para navegadores que não sejam o IE:

if element.classList.contains("dolor_spec") {  //do stuff

Aqui está, apenas a resposta do readquare ajustada para retornar uma matriz 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;
}

Passe um elemento jQuery para a função, para que uma chamada de amostra seja:

var myClasses = classList($('#myElement'));

Eu sei que esta é 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 você deseja manipular o elemento

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

Se você deseja 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