使用 jQuery 获取元素的类列表

Posted 2023-02-19

【中文标题】使用 jQuery 获取元素的类列表

【英文标题】：Get class list for element with 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 元素并聚焦它的需要。

【参考方案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。拆分空格而不是任何空格也会被破坏 - 请参阅我对 ***.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…

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

【讨论】：

***.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 是语法错误。