Mit jQuery die Klassenliste für das Element abrufen

Gibt es in jQuery eine Möglichkeit, alle Klassen, die einem Element zugewiesen sind, zu durchlaufen oder einem Array zuzuweisen?

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 zu diesem Zeitpunkt nicht unbedingt bekannt sein.

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

Dann können Sie iterieren und die gewünschte 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 ...

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

Warum hat niemand einfach aufgelistet.

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

BEARBEITEN: Wie @MarkAmery hervorhebt, können Sie dies nicht nur, .split(' ')weil Klassennamen durch beliebige Leerzeichen getrennt werden können.

Bei der Unterstützung von Browsern können Sie die classListEigenschaft von DOM-Elementen verwenden .

$(element)[0].classList

Es ist ein Array-ähnliches Objekt, das alle Klassen des Elements auflistet.

Wenn Sie alte Browserversionen unterstützen müssen, die die classListEigenschaft nicht unterstützen , enthält die verknüpfte MDN-Seite auch einen Shim dafür - obwohl selbst der Shim in Internet Explorer-Versionen unter IE 8 nicht funktioniert.

Hier ist ein jQuery-Plugin, das ein Array aller Klassen zurückgibt, über die die übereinstimmenden Elemente verfügen

;!(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 zurück

["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 eine jsFiddle, die ich eingerichtet habe, um http://jsfiddle.net/GD8Qn/8/ zu demonstrieren und zu testen.

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

Sie sollten dieses versuchen:

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

Es gibt ein Array aller aktuellen Klassen des Elements zurück.

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

     //do something

});

Aktualisieren:

Wie @Ryan Leonard richtig betont hat, behebt meine Antwort nicht wirklich den Punkt, den ich selbst gemacht habe ... Sie müssen doppelte Leerzeichen mit (zum Beispiel) string.replace (/ + / g, "") sowohl trimmen als auch entfernen. .. Oder Sie können den el.className teilen und dann leere Werte mit (zum Beispiel) arr.filter (Boolean) entfernen.

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

oder moderner

const classes = element.classList;

Alt:

Bei all den gegebenen Antworten sollten Sie niemals vergessen, .trim () (oder $ .trim ()) zu verwenden.

Da Klassen hinzugefügt und entfernt werden, kann es vorkommen, dass zwischen den Klassenzeichenfolgen mehrere Leerzeichen stehen. Beispiel: 'class1 class2 class3'.

Dies würde sich in ['Klasse1', 'Klasse2', '', '', '', 'Klasse3'] verwandeln.

Wenn Sie Trimmen verwenden, werden alle mehreren Leerzeichen entfernt.

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

Könnte Ihnen das auch helfen. Ich habe diese Funktion verwendet, um Klassen von Kinderelementen zu erhalten.

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

In Ihrem Fall möchten Sie doler_ipsum Klasse u können dies jetzt tun calsses[2];.

Vielen Dank dafür - ich hatte ein ähnliches Problem, da ich versuche, Objekte programmatisch mit hierarchischen Klassennamen zu verknüpfen, obwohl diese Namen meinem Skript möglicherweise nicht unbedingt bekannt sind.

In meinem Skript möchte ich, dass ein <a>Tag den <a>Hilfetext [some_class]ein- toggleund ausschaltet, indem das Tag plus die Klasse von und dann der Hilfetext die Klasse von angegeben wird [some_class]_toggle. Dieser Code findet die zugehörigen Elemente erfolgreich mit 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");}
    }
    });
} 

Versuche dies. Dadurch erhalten Sie die Namen aller Klassen aus allen Elementen des Dokuments.

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

});

Hier ist das Arbeitsbeispiel: https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

Ich hatte ein ähnliches Problem für ein Element vom Typ Bild. Ich musste überprüfen, ob das Element einer bestimmten Klasse angehörte. Zuerst habe ich versucht mit:

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

aber ich habe ein schönes "diese Funktion ist für dieses Element nicht verfügbar".

Dann habe ich mein Element im DOM-Explorer überprüft und ein sehr schönes Attribut gesehen, das ich verwenden konnte: className. Es enthielt die Namen aller Klassen meines Elements, die durch Leerzeichen getrennt waren.

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

Sobald Sie dies erhalten haben, teilen Sie einfach die Zeichenfolge wie gewohnt.

In meinem Fall hat das funktioniert:

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

Ich gehe davon aus, dass dies mit anderen Arten von Elementen funktionieren würde (außer img).

Ich hoffe es hilft.

Javascript bietet ein classList-Attribut für ein Knotenelement in dom. Einfach benutzen

  element.classList

gibt ein Objekt der Form zurück

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

Das Objekt verfügt über Funktionen wie enthält, hinzufügen, entfernen, die Sie verwenden können

Ein bisschen spät, aber mit der Funktion verlängern () können Sie "hasClass ()" für jedes Element aufrufen, z.
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);

Die Frage ist, wozu Jquery entwickelt wurde.

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

Und warum hat niemand .find () als Antwort gegeben?

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

Es gibt auch classList für Nicht-IE-Browser:

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

Hier ist die Antwort von Readsquare , um ein Array aller Klassen zurückzugeben:

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

Übergeben Sie ein jQuery-Element an die Funktion, sodass ein Beispielaufruf lautet:

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

Ich weiß, dass dies eine alte Frage ist, aber immer noch.

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

var className=".dolor_spec" //dynamic

Wenn Sie das Element bearbeiten möchten

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

Wenn Sie überprüfen möchten, ob das Element eine Klasse hat

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

wenn mehrere Klassen

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