Klassenliste für Element mit jQuery abrufen

Question

Gibt es eine Möglichkeit in jQuery zu Schleife durch oder weisen Sie ein Array alle Klassen, die ein Element zugeordnet sind?

ex.

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

Ich werde nach einer "speziellen" Klasse wie in "dolor_spec" oben suchen. Ich weiß, dass ich hasClass() verwenden könnte, aber der tatsächliche Klassenname muss nicht unbedingt zu diesem Zeitpunkt bekannt sein.

Answer 1

Sie können verwenden document.getElementById('divId').className.split(/\s+/); um ein Array von Klassennamen zu erhalten.

Dann können Sie iterativ vorgehen und die gewünschte Lösung finden.

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

jQuery hilft Ihnen hier nicht wirklich weiter...

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

Answer 2

Warum hat niemand einfach aufgelistet.

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

EDIT: Aufgeteilt auf /\s+/ anstelle von ' ' zu reparieren @ MarkAmery den Einwand der Kommission. (Danke @ YashaOlatoto .)

Answer 3

In unterstützenden Browsern können Sie die DOM-Elemente classList Eigentum.

$(element)[0].classList

Es handelt sich um ein Array-ähnliches Objekt, das alle Klassen auflistet, die das Element hat.

Wenn Sie alte Browserversionen unterstützen müssen, die nicht die classList Eigenschaft, die verlinkte MDN-Seite enthält auch ein Shim für sie - obwohl auch das Shim nicht auf Internet Explorer-Versionen unter IE 8 funktionieren wird.

Answer 4

Hier ist ein jQuery-Plugin, das ein Array mit allen Klassen zurückgibt, die das/die übereinstimmende(n) Element(e) haben

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

Verwenden Sie es wie

$('div').classes();

In Ihrem Fall kehrt

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

Sie können auch eine Funktion an die Methode übergeben, die für jede Klasse aufgerufen werden soll

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

Hier ist ein jsFiddle, das ich zur Demonstration und zum Testen eingerichtet habe http://jsfiddle.net/GD8Qn/8/

Verkleinertes Javascript

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

Answer 5

Versuchen Sie es doch einmal damit:

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

Sie gibt eine Liste aller aktuellen Klassen des Elements zurück.