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

Question

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

ех.

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

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

Answer 1

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

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

Answer 2

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

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

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

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

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

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

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

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

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

Надеюсь, это поможет.

Answer 3

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

<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

Answer 4

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

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

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

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

Существует также classList для браузеров не IE:

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

Answer 5

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

  element.classList

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

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

Объект имеет функции, такие как содержит, добавлять, удалять, которые вы можете использовать

Answer 6

Немного поздно, но использование функции exte () позволяет вам вызывать 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);

Answer 7

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

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