it-swarm.com.de

Klassenliste für Element mit jQuery 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.

621
Buggabill

Sie können document.getElementById('divId').className.split(/\s+/); verwenden, um ein Array 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 dir hier nicht wirklich ...

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

Warum hat niemand einfach aufgeführt.

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

EDIT: Wie @MarkAmery hervorhebt, können Sie nicht einfach .split(' '), da Klassennamen durch Leerzeichen getrennt werden können.

261
Dreamr OKelly

Hier ist ein jQuery-Plugin, das ein Array aller Klassen der übereinstimmenden Elemente zurückgibt

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

Benutze 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 zu demonstrieren und zu testen http://jsfiddle.net/Gd8Qn/8/

Reduziertes 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);
138
Will

In unterstützten Browsern können Sie die Eigenschaft classList 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 Eigenschaft classList nicht unterstützen, enthält die verknüpfte MDN-Seite auch ein Shim dafür - auch wenn das Shim in Internet Explorer-Versionen unter IE 8 nicht funktioniert.

131
Pehmolelu

Sie sollten dies versuchen:

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

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

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

     //do something

});
16
Carlisle
$('div').attr('class').split(' ').map(function(cls){ console.log(cls);})
7
alexche8

pdate:

Wie @Ryan Leonard richtig bemerkte, kann meine Antwort den Punkt, den ich selbst gemacht habe, nicht wirklich korrigieren. Oder Sie können den el.className aufteilen 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 allen gegebenen Antworten sollten Sie den Benutzer .trim () (oder $ .trim ()) niemals vergessen

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

Dies würde sich in ['class1', 'class2', '', '', '', 'class3'] verwandeln.

Wenn Sie trim verwenden, werden alle multiplen Leerzeichen entfernt.

6
DutchKevv

Könnte dir das auch helfen. Ich habe diese Funktion verwendet, um Klassen von childern-Elementen 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 deinem Fall willst du die doler_ipsum Klasse, die du jetzt calsses[2]; machen kannst.

3
Phoenix

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

In meinem Skript soll ein <a> -Tag den Hilfetext aktivieren/deaktivieren, indem das <a> -Tag [some_class] plus die Klasse von toggle und anschließend der Hilfetext angegeben werden die Klasse von [some_class]_toggle. Dieser Code findet mit jQuery erfolgreich die zugehörigen Elemente:

$("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");}
    }
    });
} 
2
Alan L.

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/

2
Sumit Raju

javascript bietet ein classList-Attribut für ein Knotenelement in dom. Einfach mit

  element.classList

gibt ein Formularobjekt 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

0
Anuj J

Ich hatte ein ähnliches Problem mit einem Element vom Typ image. Ich musste überprüfen, ob das Element zu einer bestimmten Klasse gehörte. Zuerst habe ich versucht mit:

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

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

Dann habe ich mein Element im DOM-Explorer überprüft und ein sehr nettes Attribut gefunden, 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, teilen Sie einfach die Zeichenfolge wie gewohnt.

In meinem Fall hat das geklappt:

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

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

Ich hoffe es hilft.

0
eva