使用 jQuery 获取元素的类列表答案

【问题标题】：Get class list for element with jQuery使用 jQuery 获取元素的类列表
【发布时间】：2010-11-16 16:06:06
【问题描述】：

在 jQuery 中有没有办法循环遍历或分配给数组的所有分配给元素的类？

例如

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

我将在上面的“dolor_spec”中寻找一个“特殊”类。我知道我可以使用 hasClass() 但当时不一定知道实际的类名。

【问题讨论】：

如果你当时不知道类名，妨碍你使用hasClass()，你打算怎么知道它是数组中的哪一个呢？
我正在设计一个表单，我正在使用 jQuery 进行一些初步验证。如果生成了一个，我将输入元素的 id 附加到错误 div 的类列表中。然后，我可以单击错误 div 以聚焦错误的输入元素。该脚本将用于不止一种形式。因此，我不想在脚本中硬编码 id。
对，我明白你为什么不想硬编码。但是，如果您花点时间查看 redsquare 的示例，您会发现您必须将“someClass”硬编码到 if 块中。无论哪种方式，您都可以通过变量来实现。
不使用类属性，你可以在你的命名空间中有一个错误列表变量，其中包含对有错误元素的 DOM 引用。从而省去了每次拉取属性列表、迭代它、找到 DOM 元素并聚焦它的需要。

标签： javascript jquery html

【解决方案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
    }
});

【讨论】：

这正是我要做的，但我不确定是否有内置的 jQuery 函数可以为您提供类的集合。
仅供参考：jQuery 使用 className.split(/\s+/)
自己添加一个jQuery插件：$.fn.classList = function() {return this[0].className.split(/\s+/);};

【解决方案2】：

为什么没有人简单列出。

$(element).attr("class").split(/\s+/);

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

【讨论】：

这是已接受答案的一部分...我需要应用于元素的所有类。
哈哈，真的！我只想要这个。它返回一个由空格分隔的类字符串，所以如果你想选择其中一个类，你可以按空格分割字符串并获取一个数组以从中选择一个类
因为错了！类可以用任何类型的空格分隔（例如，您可以将 HTML 中的长类属性包装成多行），但这个答案无法解释这一点。尝试将$('<div class="foo bar baz">').attr("class").split(' ') 粘贴到浏览器控制台中（那里有一个制表符）；你会得到["foo", "bar baz"] 而不是["foo", "bar", "baz"] 的正确类列表。
@MarkAmery 是对的。如果你有一个class="foo <lots of spaces here> bar"，你最终会得到一个包含空字符串元素的数组。
@JacobvanLingen 在现代浏览器中，类之间可以有很多空格吗？

【解决方案3】：

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

$(element)[0].classList

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

如果您需要支持不支持 classList 属性的旧浏览器版本，链接的 MDN 页面还包含一个填充程序 - 尽管即使 shim 也无法在低于 IE 8 的 Internet Explorer 版本上工作。

【讨论】：

@Marco Sulla：除了对过时软件的支持之外，这确实有一个缺点。 .classList 不是真正的数组，.indexOf(⋯) 这样的方法对它不起作用。它只是一个“类似数组的对象”，而 .className.split(/\s+/).indexOf(⋯)（来自已接受的答案）有效。
您可以使用 [...iterable] 或 Array.from(iterable) 轻松地将任何可迭代对象转换为 Array

【解决方案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);

【讨论】：

【解决方案5】：

你应该试试这个：

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

它返回元素所有当前类的列表。

【讨论】：

嗯，我不知道。但这是从 DOM 元素获取属性的正确方法。而“classList”就是这样的属性，它为您提供了一个应用于元素的 css 类数组。
@RozzA 也许当时不可用？但我想说这是目前最合适的方法，除非你不使用 jQuery，一个简单的.classList 是解决方案 - 你只需要注意不一致和/或缺少浏览器支持..
@Dennis98 好电话，我有时会忘记最近新功能出现的速度有多快。我也做了纯 js .classList 它在现代浏览器中运行良好
请注意，classList 属性不适用于 IE 10/11 的 SVG 元素（尽管它适用于 HTML 元素）。见developer.mozilla.org/en-US/docs/Web/API/Element/classList
@Métoule 也可以使用 .prop('classList') not work in IE9 用于 HTML 元素。

【解决方案6】：

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

     //do something

});

【讨论】：

【解决方案7】：

更新：

正如@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']..

当您使用修剪时，所有多个空格都会被删除。.

【讨论】：

这是不正确的（不是答案）。 String.trim() 和 $.trim() 都删除所有前导和尾随空格，并保留字符串的其余部分。 jsconsole.com/?%22%20%20a%20%20b%20%20%22.trim()
你有没有看过答案？所有原生 JS 解决方案都没有检查前导和尾随空格，因此给出了错误的类列表，因为数组中会有空类。jQuery 在读取类时在内部对 trim 执行相同操作
我确实看到了其他答案，并同意应该删除类名之间的空格。我指出 a) 这应该是对其他解决方案的评论，因为它不是一个完整的答案 b) .trim() 确实 not 删除多个空格以实现您所需要的。
你确实是完全正确的......对不起我的快速评论......它不会删除它们之间的空格...... s.trim().replace(/ +/g, " ") 或者需要删除类之间的所有多个空格。除此之外，el.classList 几乎得到了广泛的支持，我想都可以修复它..
完全没问题。很高兴，.classList 是一种更清洁的方法！

【解决方案8】：

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

【讨论】：

这是对.map的可怕滥用；如果您不需要.map 的返回值，请使用.each。拆分空格而不是任何空格也会被破坏 - 请参阅我对 stackoverflow.com/a/10159062/1709587 的评论。即使这些观点都不成立，这也不会为页面增加任何新内容。 -1！

【解决方案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];。

【讨论】：

【解决方案10】：

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

在我的脚本中，我想要一个 <a> 标签来打开/关闭帮助文本，方法是提供 <a> 标签 [some_class] 加上 toggle 的类，然后给它的帮助文本 @987654325 类@。此代码使用 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");}
    }
    });
}

【讨论】：

谢谢艾伦，我正在做类似的事情，我很惊讶没有更简单的方法可以做到这一点。
-1 - tl;dr，偏离了与问题没有直接关系的切线。

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

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

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

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

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

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

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

在我的情况下，这有效：

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

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

希望对你有帮助。

【讨论】：

【解决方案13】：

为了获取应用于元素的类列表，我们可以使用

$('#elementID').prop('classList')

对于添加或删除任何类，我们可以按照以下方式进行操作。

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

为了简单地检查类是否存在，我们可以使用hasClass

【讨论】：

不回答问题
@Aurovrata $('#elementID').prop('classList') 用于获取元素的类列表，以及用于更改元素列表的 .add 和 .remove 方法类。问题不是问如何在 JQuery 中获取班级列表吗？
确实，这个问题专门询问如何获取类列表以便循环遍历它，没有提到添加或删除类。此外，您的回答未能解释它的作用。请考虑改进它。
@Aurovrata：谢谢，我已经改进了答案，请随时根据要求进一步改进。

【解决方案14】：

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

  element.classList

将返回一个表单对象

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

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

【讨论】：

stackoverflow.com/a/5457148/1709587 的劣质副本，在您之前 3 年发布； -1.
专问jQuery解决方案

【解决方案15】：

有点晚了，但是使用 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 从 1.2 版本开始就内置了这个功能。

【解决方案16】：

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

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

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

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

还有非IE浏览器的classList：

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

【讨论】：

-1;除其他问题外，您的前两个代码 sn-ps 与所提出的问题无关，您的最终 sn-p 是语法错误。