Получить список классов для элемента с помощью jQuery

Question

Есть ли в jQuery способ перебрать или присвоить массиву все классы, назначенные элементу?

ех.

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

Я буду искать "специальный" класс, как в "dolor_spec" выше. Я знаю, что мог бы использовать hasClass (), но фактическое имя класса не обязательно может быть известно в то время.

Answer 1

Вы можете использовать document.getElementById('divId').className.split(/\s+/);, чтобы получить массив имен классов.

Тогда вы можете повторить и найти тот, который вы хотите.

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

jQuery здесь не особо помогает ...

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

Answer 2

Почему никого нет в списке.

$(element).attr("class").split(' ');

Answer 3

Вот плагин jQuery, который будет возвращать массив всех классов, которые имеют соответствующие элементы

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

Используйте это как

$('div').classes();

В вашем случае возвращается

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

Вы также можете передать функцию в метод, вызываемый в каждом классе

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

Вот jsFiddle, который я настроил для демонстрации и тестирования http://jsfiddle.net/GD8Qn/8/

Минимизированный 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 4

В поддерживаемых браузерах вы можете использовать свойство DOM elements 'classList.

$(element)[0].classList

Это массивоподобный объект, в котором перечислены все классы элемента.

Если вам требуется поддержка старых версий браузера, которые не поддерживают свойство classList, связанная страница MDN также включает в себя прокладку для нее - хотя даже эта оболочка не будет работать в версиях Internet Explorer ниже IE 8.

Answer 5

Вы должны попробовать это:

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

Возвращает массив всех текущих классов элемента.

Answer 6

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

     //do something

});

Answer 7

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

Answer 8

Обновление:

Как правильно заметил Райан Леонард, мой ответ на самом деле не фиксирует то, что я сделал сам ... Вам нужно как обрезать, так и удалить двойные пробелы с помощью (например) string.replace (/ + / g, "") .. Или вы можете разделить el.className и затем удалить пустые значения с помощью (например) arr.filter (Boolean).

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

или более современный

const classes = element.classList;

Старый:

При всех приведенных ответах вы никогда не должны забывать пользователя .trim () (или $ .trim ())

Поскольку классы добавляются и удаляются, может случиться, что между строкой класса будет несколько пробелов, например 'класс1 класс2 класс3' ..

Это превратится в ['class1', 'class2', '', '', '', 'class3'] ..

При использовании обрезки удаляются все несколько пробелов.

Answer 9

Возможно, это тоже может вам помочь. Я использовал эту функцию, чтобы получить классы детского элемента ..

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

В вашем случае вам нужен класс doler_ipsum, который вы можете сделать сейчас calsses[2];.

Answer 10

Спасибо за это - у меня возникла похожая проблема, так как я пытаюсь программно соотнести объекты с иерархическими именами классов, даже если эти имена не обязательно известны моему сценарию.

В моем сценарии я хочу, чтобы тег <a> включал / выключал текст справки, назначая тег <a> [some_class] плюс класс toggle, а затем присваивая тексту справки класс * 1007. *. Этот код успешно находит связанные элементы, используя 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");}
    }
    });
}