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

编辑：拆分/\\s+/而不是' '以修复 @ MarkAmery的反对意见。 （谢谢@ YashaOlatoto 。）

Answer 3

在支持的浏览器上，您可以使用 DOM 元素的classList属性。

$(element)[0].classList

它是一个类似数组的对象，列出元素所具有的所有类。

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

Answer 4

这是一个 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 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(' ').each(function(cls){ console.log(cls);})

Answer 8

更新：

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

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

或更现代的

const classes = element.classList;

老的：

有了所有给定的答案，您永远不应该忘记用户 .trim() （或 $.trim()）

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

这将变成 ['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 calsses[2]; .

Answer 10

试试这个。 这将使您从文档的所有元素中获得所有类的名称。

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

感谢这一点 - 我遇到了类似的问题，因为我试图以编程方式将对象与分层类名称相关联，即使我的脚本可能不一定知道这些名称。

在我的脚本中，我想要一个<a>标签来打开/关闭帮助文本，方法是给<a>标签[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");}
    }
    });
} 

Answer 12

对于图像类型的元素，我遇到了类似的问题。 我需要检查元素是否属于某个类。 首先我尝试：

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

但我得到了一个很好的“此功能不适用于此元素”。

然后我在 DOM 资源管理器上检查了我的元素，我看到了一个可以使用的非常好的属性：className。 它包含由空格分隔的元素的所有类的名称。

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

一旦你得到这个，就像往常一样拆分字符串。

在我的情况下，这有效：

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

我假设这适用于其他类型的元素（除了 img）。

希望能帮助到你。

Answer 13

你可以遵循这样的事情。

$('#elementID').prop('classList').add('yourClassName')
$('#elementID').prop('classList').remove('yourClassName')

Answer 14

javascript 为 dom 中的节点元素提供了一个 classList 属性。 简单地使用

  element.classList

将返回一个表单对象

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

该对象具有包含、添加、删除等功能，您可以使用这些功能

Answer 15

问题是 Jquery 的设计目的是什么。

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

为什么没有人给出.find()作为答案？

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

非 IE 浏览器也有 classList：

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

Answer 16

有点晚了，但是使用 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);

Answer 17

我知道这是一个古老的问题，但仍然存在。

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

jQuery中是否有一种方法可以循环或将分配给元素的所有类分配给数组？

前任。

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

我将在上面的“ dolor_spec”中寻找“特殊”类。 我知道我可以使用hasClass（），但是实际的类名在那时不一定是已知的。