使用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(/\s+/);

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元素的classList属性.

$(element)[0].classList

它是一个类似于数组的对象,列出了元素具有的所有类.

如果您需要支持不支持该classList属性的旧浏览器版本,链接的MDN页面也包含一个垫片 - 尽管即使是垫片也不适用于IE 8以下的Internet Explorer版本.

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

更新:

正如@Ryan Leonard正确指出的那样,我的回答并没有真正解决我自己的问题......你需要修剪并删除双重空格(例如)string.replace(/ +/g,"") ..或者您可以拆分el.className,然后使用(例如)arr.filter(布尔值)删除空值.

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

或更现代

const classes = element.classList;

旧:

有了所有给定的答案,你永远不应该忘记用户.trim()(或$ .trim())

因为类被添加和删除,所以可能发生类字符串之间有多个空格.例如'class1 class2 class3'..

这会变成['class1','class2','','','','class3'] ..

使用trim时,会删除所有多个空格.