Ottieni l'elenco delle classi per l'elemento con jQuery

Esiste un modo in jQuery per eseguire il ciclo o assegnare a un array tutte le classi assegnate a un elemento?

ex.

<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>

Cercherò una classe "speciale" come in "dolor_spec" sopra. So che potrei usare hasClass () ma il nome della classe effettiva potrebbe non essere necessariamente noto al momento.

Puoi usare document.getElementById('divId').className.split(/\s+/); per ottenere una matrice di nomi di classe.

Quindi puoi iterare e trovare quello che desideri.

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

jQuery non ti aiuta davvero qui ...

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

Perché nessuno ha semplicemente elencato.

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

EDIT: Come sottolinea @MarkAmery, non puoi semplicemente .split(' ')perché i nomi delle classi possono essere separati da qualsiasi tipo di spazio bianco.

Sui browser di supporto, puoi utilizzare la classListproprietà degli elementi DOM .

$(element)[0].classList

È un oggetto simile a un array che elenca tutte le classi dell'elemento.

Se è necessario supportare le versioni di browser precedenti che non supportano la classListproprietà, la pagina MDN collegata include anche uno shim, sebbene anche lo shim non funzionerà su versioni di Internet Explorer inferiori a IE 8.

Ecco un plugin jQuery che restituirà un array di tutte le classi degli elementi corrispondenti

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

Usalo come

$('div').classes();

Nel tuo caso ritorna

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

È inoltre possibile passare una funzione al metodo da chiamare su ogni classe

$('div').classes(
    function(c) {
        // do something with each class
    }
);

Ecco un jsFiddle che ho impostato per dimostrare e testare http://jsfiddle.net/GD8Qn/8/

Javascript minimizzato

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

Dovresti provare questo:

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

Restituisce un array di tutte le classi correnti dell'elemento.

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

     //do something

});

Aggiornare:

Come ha sottolineato correttamente @Ryan Leonard, la mia risposta non risolve davvero il punto che mi sono reso ... Devi tagliare e rimuovere i doppi spazi con (ad esempio) string.replace (/ + / g, "") .. Oppure potresti dividere el.className e quindi rimuovere i valori vuoti con (ad esempio) arr.filter (Booleano).

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

o più moderno

const classes = element.classList;

Vecchio:

Con tutte le risposte fornite, non dovresti mai dimenticare l'utente .trim () (o $ .trim ())

Poiché le classi vengono aggiunte e rimosse, può accadere che vi siano più spazi tra le stringhe di classe .. ad es. 'Class1 class2 class3' ..

Ciò si trasformerebbe in ['class1', 'class2', '', '', '', 'class3'] ..

Quando si utilizza il ritaglio, tutti gli spazi multipli vengono rimossi.

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

Questo potrebbe aiutare anche te. Ho usato questa funzione per ottenere classi di elementi 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();
    });
}

Nel tuo caso vuoi la classe doler_ipsum che puoi fare così adesso calsses[2];.

Grazie per questo - Stavo avendo un problema simile, poiché sto cercando di mettere in relazione programmaticamente gli oggetti con nomi di classe gerarchici, anche se quei nomi potrebbero non essere necessariamente noti al mio script.

Nel mio script, desidero che un <a>tag attivi / disattivi il testo guida fornendo il <a>tag [some_class]più la classe di toggle, e quindi dando il testo guida alla classe di [some_class]_toggle. Questo codice trova correttamente gli elementi correlati 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");}
    }
    });
} 

Prova questo. Questo ti darà i nomi di tutte le classi da tutti gli elementi del 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);

});

Ecco l'esempio funzionante: https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

Ho avuto un problema simile, per un elemento di tipo immagine. Dovevo verificare se l'elemento apparteneva a una determinata classe. Per prima cosa ho provato con:

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

ma ho ottenuto un bel "questa funzione non è disponibile per questo elemento".

Poi ho ispezionato il mio elemento su DOM Explorer e ho visto un attributo molto carino che potevo usare: className. Conteneva i nomi di tutte le classi del mio elemento separate da spazi vuoti.

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

Una volta ottenuto questo, basta dividere la stringa come al solito.

Nel mio caso questo ha funzionato:

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

Suppongo che funzionerebbe con altri tipi di elementi (oltre a img).

Spero che sia d'aiuto.

javascript fornisce un attributo classList per un elemento nodo in dom. Semplicemente usando

  element.classList

restituirà un oggetto di forma

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

L'oggetto ha funzioni come contiene, aggiungi, rimuovi che puoi usare

Un po 'in ritardo, ma usando la funzione ext () puoi chiamare "hasClass ()" su qualsiasi elemento, ad esempio:
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);

La domanda è: cosa Jquery è progettato per fare.

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

E perché nessuno ha dato .find () come risposta?

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

Esiste anche classList per browser non IE:

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

Ecco qua, ho appena modificato la risposta di readsquare per restituire una matrice di tutte le classi:

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;
}

Passa un elemento jQuery alla funzione, in modo che una chiamata di esempio sia:

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

So che questa è una vecchia domanda, ma comunque.

<div id="specId" class="Lorem ipsum dolor_spec sit amet">Hello World!</div>

var className=".dolor_spec" //dynamic

Se vuoi manipolare l'elemento

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

Se vuoi verificare se l'elemento ha classe

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

se più classi

//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