Javascript 使用jQuery获取元素的类列表

在jQuery中有没有一种方法可以循环或分配给数组所有分配给元素的类

前

你好，世界！

---

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

您可以使用

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

---

有点晚，但是使用extend（）函数可以对任何元素调用“hasClass（）”，例如：

var hasClass=$（'#divId'）.hasClass（'someClass'）

（函数（$）{
$扩展({
hasClass:新函数（类名）{
var classAttr=$J（this.attr（'class'）；
if（classAttr！=null&&classAttr！=undefined）{
var classList=classAttr.split（/\s+/）；
for（var ix=0，len=classList.length；ix
在支持的浏览器上，可以使用DOM元素的属性

$(element)[0].classList

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

如果您需要支持不支持
classList
属性的旧浏览器版本，链接的MDN页面还包括一个垫片-尽管即使垫片在IE 8以下的Internet Explorer版本上也不起作用。
谢谢-我遇到了类似的问题，当我试图以编程方式将对象关联起来时，将使用层次化类名，即使我的脚本不一定知道这些名称

在我的脚本中，我需要一个
标记来打开/关闭帮助文本，方法是给
标记
[some\u class]
加上
toggle
类，然后给它的帮助文本提供
[some\u 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");}
    }
    });
} 

为什么没有人简单地列出

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

编辑：在
/\s+/
而不是
''
上拆分以修复@的异议。（谢谢。）
这是一个jQuery插件，它将返回匹配元素拥有的所有类的数组

在你的情况下

["Lorem", "ipsum", "dolor_spec", "sit", "amet"]

您还可以将函数传递给每个类上要调用的方法

$('div').classes(
    function(c) {
        // do something with each class
    }
);

这里是我设置的一个JSFIDLE，用于演示和测试

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

  element.classList

将返回形式的对象

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

对象具有包含、添加、删除等功能，您可以使用这些功能
问题是Jquery的设计目的是什么

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

为什么没有人给出答案

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

还有针对非IE浏览器的类列表：

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

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

$(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);

$（文档）.ready（函数（）{
var currentHtml=“”；
$（'*'）。每个（函数（）{
if（$（this）.hasClass（“”）==false）{
var class_name=$（this.attr（'class'）；
if（类名称匹配（/\s/g））{
var newClasses=class_name.split（“”）；
对于（var i=0；i更新：

正如@Ryan Leonard正确指出的，我的答案并没有真正解决我自己提出的问题……你需要用（例如）string.replace（+/+/g，“”）修剪和删除双空格……或者你可以拆分el.className，然后用（例如）arr.filter（布尔）删除空值

还是更现代

const classes = element.classList;

旧版：

对于所有给定的答案，您永远不要忘记使用user.trim（）（或$.trim（））

因为类被添加和删除，所以类字符串之间可能有多个空格。例如，“class1 class2 class3”

这将变成['class1'，'class2'，''，''，''，'class3']

当您使用trim时，所有多个空格都会被删除。
这可能也会对您有所帮助。我使用了这个函数来获取childern元素的类

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();
    });
}

函数getClickClicked（）{
var clickedElement=null；
var classes=null；您应该尝试以下方法：

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

它返回元素的所有当前类的列表。
对于image类型的元素，我遇到了类似的问题。我需要检查元素是否属于某个类。首先，我尝试了：

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

一旦你得到这个，就像往常一样把绳子分开

在我的情况下，这起了作用：

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

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

希望能有所帮助。
您可以按照下面的说明进行操作

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

这正是我应该做的，但我不确定是否有内置的jQuery函数为您提供了一个类集合。仅供参考：jQuery使用className.split（/\s+/）自己添加一个jQuery插件：
$.fn.classList=function（）{返回这个[0]。className.split（/\s+/）；}；
，或者您可以：
如果（$.inArray（“someclass”），classList）>=0）{/*hasClass someclass*/}
这里不是javascript专家。你能告诉我split（/\s+/）是否比简单地执行split（“”）更好吗？在FF23/Chrome28/IE8中，它对我同样有效。如果你当时不知道类名，会阻止你使用hasClass（），您打算如何知道它是数组中的哪一个？我正在设计一个表单，其中我正在使用jQuery进行一些初步验证。如果生成了错误div，我会将输入元素的id附加到错误div的类列表中。然后，我可以单击错误div来集中错误的输入元素。此脚本正在运行用于多个表单。因此，我不想在脚本中硬编码ID。是的，我理解您为什么不想硬编码。但如果您花一点时间查看redsquare的示例，您会发现您必须将“someClass”硬编码到if块中。无论采用哪种方法，您都可以使用
if element.classList.contains("dolor_spec") {  //do stuff

$(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);

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

const classes = element.classList;

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();
    });
}

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

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

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

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

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