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

Danke dafür - ich hatte ein ähnliches Problem, da ich versuche, Objekte programmatisch mit hierarchischen Klassennamen zu verknüpfen, auch wenn diese Namen meinem Skript nicht unbedingt bekannt sind.

In meinem Skript möchte ich eine <a> Tag, um den Hilfetext ein- und auszuschalten, indem Sie den <a> Tag [some_class] sowie die Klasse der toggle und gibt dann seinen Hilfetext der Klasse von [some_class]_toggle . Dieser Code ist erfolgreich die verwandten Elemente mit jQuery zu finden:

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

Answer 2

Versuchen Sie dies. So 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/

Answer 3

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

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

aber ich erhielt die nette Meldung "Diese Funktion ist für dieses Element nicht verfügbar".

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

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

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

In meinem Fall hat das funktioniert:

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

Ich nehme an, dass dies auch mit anderen Arten von Elementen (außer img) funktionieren würde.

Ich hoffe, es hilft.

Answer 4

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

  element.classList

gibt ein Objekt der Form

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

Das Objekt hat Funktionen wie contains, add, remove, die Sie verwenden können

Answer 5

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