Uzyskaj listę klas dla elementu za pomocą jQuery

Czy w jQuery istnieje sposób na zapętlenie lub przypisanie do tablicy wszystkich klas przypisanych do elementu?

dawny.

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

Będę szukał „specjalnej” klasy jak w „dolor_spec” powyżej. Wiem, że mógłbym użyć hasClass (), ale rzeczywista nazwa klasy może nie być w tym czasie znana.

Możesz użyć, document.getElementById('divId').className.split(/\s+/);aby uzyskać tablicę nazw klas.

Następnie możesz iterować i znaleźć ten, który chcesz.

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

jQuery nie pomaga ci tutaj ...

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

Dlaczego nikogo nie wymieniono?

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

EDYCJA: Jak wskazuje @MarkAmery, nie można po prostu .split(' ')dlatego, że nazwy klas można oddzielić dowolnym rodzajem białych znaków.

W obsługiwanych przeglądarkach można używać classListwłaściwości elementów DOM .

$(element)[0].classList

Jest to obiekt podobny do tablicy, zawierający listę wszystkich klas tego elementu.

Jeśli potrzebujesz obsługiwać starsze wersje przeglądarki, które nie obsługują tej classListwłaściwości, połączona strona MDN również zawiera podkładkę dla niej - chociaż nawet podkładka nie będzie działać w wersjach Internet Explorer poniżej IE 8.

Oto wtyczka jQuery, która zwróci tablicę wszystkich klas, które mają pasujące elementy

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

Użyj tego jak

$('div').classes();

W twoim przypadku powraca

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

Możesz także przekazać funkcję do metody, która zostanie wywołana w każdej klasie

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

Oto jsFiddle, który skonfigurowałem, aby zademonstrować i przetestować http://jsfiddle.net/GD8Qn/8/

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

Powinieneś spróbować tego:

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

Zwraca tablicę wszystkich bieżących klas elementu.

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

     //do something

});

Aktualizacja:

Jak prawidłowo wskazał @Ryan Leonard, moja odpowiedź tak naprawdę nie naprawia punktu, który sam sobie stworzyłem ... Musisz zarówno przycinać, jak i usuwać podwójne spacje (na przykład) string.replace (/ + / g, "") .. Lub możesz podzielić el.className, a następnie usunąć puste wartości za pomocą (na przykład) arr.filter (Boolean).

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

lub bardziej nowoczesny

const classes = element.classList;

Stary:

Przy wszystkich podanych odpowiedziach nigdy nie powinieneś zapominać o użytkowniku .trim () (lub $ .trim ())

Ponieważ klasy są dodawane i usuwane, może się zdarzyć, że między łańcuchem klas jest wiele spacji .. np. „Class1 class2 class3” ..

Zmieniłoby się to w [„klasa 1”, „klasa 2”, „”, „”, „”, „klasa 3”] ..

Podczas korzystania z przycinania wszystkie wielokrotne spacje są usuwane.

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

Może to też może ci pomóc. Użyłem tej funkcji, aby uzyskać klasy elementu potomnego ..

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

W twoim przypadku chcesz, aby klasa doler_ipsum mogła zrobić to teraz calsses[2];.

Dzięki za to - miałem podobny problem, ponieważ próbuję programowo powiązać obiekty z hierarchicznymi nazwami klas, nawet jeśli te nazwy niekoniecznie są znane mojemu skryptowi.

W moim skrypcie chcę, aby <a>tag włączał / wyłączał tekst pomocy, podając <a>tag [some_class]plus klasę toggle, a następnie podając jej tekst pomocy klasy [some_class]_toggle. Ten kod skutecznie odnajduje powiązane elementy za pomocą 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");}
    }
    });
} 

Spróbuj tego. Otrzymasz nazwy wszystkich klas ze wszystkich elementów dokumentu.

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

});

Oto działający przykład: https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

Miałem podobny problem dotyczący elementu obrazu typu. Musiałem sprawdzić, czy element należał do określonej klasy. Najpierw próbowałem z:

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

ale mam fajny „ta funkcja nie jest dostępna dla tego elementu”.

Następnie sprawdziłem mój element w eksploratorze DOM i zobaczyłem bardzo fajny atrybut, którego mogłem użyć: className. Zawierał nazwy wszystkich klas mojego elementu oddzielone spacjami.

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

Gdy to otrzymasz, po prostu podziel sznurek jak zwykle.

W moim przypadku to zadziałało:

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

Zakładam, że działałoby to z innymi rodzajami elementów (oprócz img).

Mam nadzieję, że to pomoże.

javascript zapewnia atrybut classList dla elementu węzła w dom. Po prostu używa

  element.classList

zwróci obiekt formy

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

Obiekt ma takie funkcje, jak zawiera, dodaje, usuwa, których można użyć

Trochę za późno, ale użycie funkcji ext () pozwala wywołać „hasClass ()” na dowolnym elemencie, np .:
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);

Pytanie brzmi: do czego służy Jquery.

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

I dlaczego nikt nie podał .find () jako odpowiedzi?

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

Istnieje także lista klas dla przeglądarek innych niż IE:

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

Proszę bardzo, poprawiłem odpowiedź readsquare , aby zwrócić tablicę wszystkich klas:

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

Przekaż element jQuery do funkcji, aby przykładowe wywołanie miało postać:

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

Wiem, że to stare pytanie, ale nadal.

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

var className=".dolor_spec" //dynamic

Jeśli chcesz manipulować elementem

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

Jeśli chcesz sprawdzić, czy element ma klasę

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

jeśli wiele klas

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