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

почему никто просто не перечислил.

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

вот плагин 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);

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

$(element)[0].classList

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

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

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

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

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

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

     //do something

});

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

обновление:

Как правильно указал @ Ryan Leonard, мой ответ на самом деле не фиксирует точку, которую я сделал сам... Вам нужно как обрезать и удалить двойные пробелы (например) строку.заменить(/ +/г, " ").. Или вы можете разделить el.имя класса, а затем удалите пустые значения с помощью (например) arr.фильтр(логический).

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

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

const classes = element.classList;

старый:

со всеми данными ответами, вы должны никогда не забывайте о пользователе .отделка() (или $.trim ())

поскольку классы добавляются и удаляются, может случиться, что между строкой класса есть несколько пробелов.. например, 'class1 class2 class3'..

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

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

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

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 u мог сделать это сейчас calsses[2];.

Попробуйте Это. Это даст вам имена всех классов из всех элементов документа.

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

});

вот рабочий пример:https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

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

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

javascript предоставляет атрибут classList для элемента узла в dom. Просто используя

  element.classList

вернет объект формы

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

объект имеет такие функции, как contains, add, remove, которые вы можете использовать

у меня была аналогичная проблема, для элемента типа "изображение". Мне нужно было проверить, относится ли элемент к определенному классу. Сначала я попробовал с:

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

но я получил хороший "эта функция не доступна для этого элемента".

затем я проверил свой элемент в DOM explorer, и я увидел очень хороший атрибут, который я мог бы использовать: className. Он содержал имена всех классов моего элемента, разделенные пробелами.

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

как только вы получите эту, просто разделите строку, как обычно.

В моем случае это сработало:

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

Я предполагаю, что это будет работать с другими видами элементов (кроме Гуи).

надеюсь, что это помогает.

немного поздно, но с помощью функции extend() можно вызвать "hasClass ()" для любого элемента, например:
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);

вопрос в том, для чего предназначен Jquery.

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

а почему никто не дал .найти() как ответ?

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

существует также список классов для браузеров, отличных от IE:

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

вот вы идете, просто подправил readsquare's ответ, чтобы вернуть массив всех классов:

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

передать элемент jQuery в функцию, так что пример вызова будет:

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

Я знаю, это старый вопрос, но все же.

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

var className=".dolor_spec" //dynamic

если вы хотите манипулировать элемент

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

если вы хотите проверить, если элемент имеет класс

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

если несколько классов

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