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

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

恩。

Hello World!

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

• 如果您当时不知道类名，从而无法使用hasClass()，那么您打算如何知道它是数组中的哪一个呢？
• 我正在设计一种使用jQuery进行初步验证的表单。如果生成一个，我会将输入元素的ID附加到错误div的类列表中。然后，我可以单击error div以聚焦错误的输入元素。该脚本将用于多种形式。因此，我不想在脚本中对ID进行硬编码。
• 这是我正在使用pastebin.com/m35dc280的代码
• 是的，我知道您为什么不想硬编码。但是，如果您花一点时间查看redsquares示例，您将看到必须将someClass硬编码到if块中。无论哪种方式，您都可以使用变量来实现。
• 与其使用class属性，不如在您的命名空间中包含一个错误列表变量，其中包含对有错误元素的DOM引用。因此，无需每次都拉出属性列表，对其进行迭代，找到DOM元素并对其进行聚焦。

您可以使用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+);};
• 否则您可以：if ($.inArray("someclass",classList)>=0) { * hasClass someclass* }
• 不是这里的JavaScript专家。您能告诉我split(/ s + /)是否比仅仅进行split("")好？在FF23 / Chrome28 / IE8中，它对我的??工作原理相同。
• @RobertoLinares有关原因，请参见gyazo.com/04490233dcc9fb3e1a133ada848a986c
• 下面更好的答案
• @Eugen Konkov注意日期，道具不是
• @redsquare如果是这样，最好的答案应该更改
• @EugenKonkov取决于他们使用的是哪个版本的jq ....
• 您可能还应该使用.trim()来剥离不需要的空类，例如：document.getElementById(divId).className.trim().split(\s+);
• jQuery确实有帮助...如果您总是使用jquery选择器或已经拥有一个。只需拍一拍.attr(class).split(/ s + /);然后切换到常规JavaScript会更好。谢谢回答顺便说一句。

为什么没有人简单列出。

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

编辑：正如@MarkAmery指出的那样，您不能仅.split(' ')，因为类名可以用任何类型的空格分隔。

• 这是公认的答案的一部分...我需要应用于元素的所有类。
• 哈哈，是真的！我只想要这个。它返回一串用空格分隔的类，因此，如果您想选择其中的一个，则可以按空格分割该字符串并获取一个数组以从中选取一个类
• 因为错了！可以用任何类型的空格分隔类(例如，您可以将HTML中的长类属性包装到多行中)，但是此答案无法解决这个问题。尝试将$().attr("class").split( )粘贴到浏览器控制台中(在其中放置一个制表符)；您将得到["foo","bar baz"]而不是["foo","bar","baz"]的正确类列表。
• @MarkAmery是正确的。如果您有一个class="foo bar"，最终将得到一个带有空字符串元素的数组。
• @JacobvanLingen在现代浏览器中的类之间是否可能有很多空格？
• @Philip：是的，那仍然可行(刚刚在Google Chrome v。48中进行了测试)
• 我认为在99％的情况下，该解决方案是有效的，即只要您控制HTML。我想不出任何理由，即使HTML标准允许，我们也需要支持制表符或类名之间多个空格的可能性。
• 因为从现在开始的三年后，一些开发人员将出于某些不可预见的目的使用您的代码，并意外或故意将回车符，制表符或多余的空间放在了您意料之外的位置，一切都将中断。
• @GordonRouse爬到类列表中的额外空间是很常见的，尤其是当某种逻辑写出类列表时。
• @GordonRouse现实世界中，我遇到过几次在HTML的类列表中的类之间有多个空格的现实原因是，如果它们是从一个模板生成的，并且满足某些条件，则每个类都包含在其中。在这种情况下，您可以在模板中列出带有换行符的类，以便可以在自己的行上编写每个三元表达式。另一种可能性是，如果您在代码中遵循80列的限制，并且在HTML中的深层嵌套元素中添加了很多类，则可能无法将它们全部都放在一行中。
• 您能不能只拆分(/ s + /)？摆脱了所有大块的空间

这是一个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);

• 将类复制到Event的className属性中时，它非常适合FullCalendar。

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

$(element)[0].classList

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

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

• 干净的答案，不会重新发明轮子。

您应该尝试以下一种方法：

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

它返回该元素的所有当前类的数组。

• 这比公认的答案更整洁，是否有任何理由不使用此方法？
• 好吧，我不知道。但这是从DOM元素获取属性的正确方法。而" classList"是这样的属性，它为您提供了应用于该元素的一组css类。
• @RozzA也许当时还没有？但我要说的是，到目前为止，这是最合适的方法，除非您不使用jQuery，而jQuery是一种简单的.classList解决方案-您只需要注意不一致和/或缺少浏览器支持。
• @ Dennis98是个好电话，我忘记了有时候新功能有多快出现。 Ive还完成了普通js .classList，在现代浏览器中效果很好
• +1 prop方法优于attr方法-有关详细说明，请参见接受的答案stackoverflow.com/questions/5874652/prop-vs-attr
• 请注意，classList属性不适用于IE 10/11的SVG元素(尽管它适用于HTML元素)。参见developer.mozilla.org/zh-CN/docs/Web/API/Element/classList
• @Mtoule以及.prop(classList)可能也无法在IE9中用于HTML元素。
• 以及如何获取类列表中的类，即以dolor_开头的类？ IE11不支持DOMTokenList：caniuse.com/#search=DOMTokenList

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

     //do something

});

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

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

更新：

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

使用修剪时，所有多个空格都将被删除。 (短码网-duanma.net)

• 这是不正确的(不是答案)。 String.trim()和$ .trim()都删除所有前导和尾随空格，并将其余的字符串保留下来。 jsconsole.com /？％22％20％20A％20％20B％20％20％22.trim()
• 你甚至看过答案吗？所有本机JS解决方案都没有检查开头和结尾的空格，因此给出了错误的类列表，因为数组中将有空类。.jQuery在读取类时在内部进行了修整
• 我确实看到了其他答案，并同意应该在类名之间删除空格。我指出的是a)这应该是对其他解决方案的评论，因为它不是一个完整的答案b).trim()不会删除多个空格来实现您所需要的。
• 确实，您完全正确。很抱歉，我的快速评论..它不会删除它们之间的空格... s.trim()。replace(/ + / g，"")或需要删除某些内容类之间的所有多个空格。.接下来，el.classList得到了广泛支持，修复了我想的所有问题。
• 没问题。令人欣慰的是，.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();
    });
}

在您的情况下，您希望doler_ipsum类现在可以calsses[2];这样执行。

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

$(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]+"{}"
                }
            }
        }
        else
        {
            if (currentHtml.indexOf(class_name) <0) {
                currentHtml +="."+class_name+"{}"
            }
        }
    }
    else
    {
        console.log("none");
    }
});
$("#Test").html(currentHtml);

});

这是工作示例：https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

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

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

• 感谢Alan，我正在做类似的事情，我惊讶地发现没有更简单的方法可以做到这一点。
• -？1-tl; dr，在与该问题不直接相关的切线上开始。

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

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

但是我得到了一个很好的"此元素不可用此功能"。

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

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

一旦获得此权限，只需照常拆分字符串即可。

就我而言，这可行：

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

我假设这将与其他类型的元素一起工作(除了img)。

希望能帮助到你。

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

  element.classList

将返回一个形式的对象

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

该对象具有包含，添加，删除之类的功能，可以使用

• 在您之前3年发布的stackoverflow.com/a/5457148/1709587的劣等副本； -1。

问题是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？;除其他问题外，您的前两个代码段与所询问的问题无关，而最后一个代码段是语法错误。

有点晚了，但是使用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版以来就内置了此功能。

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

Hello World!

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

• 这些片段都没有解决所提出的问题。 -1。

在这里，您只需调整readsquare的答案即可返回所有类的数组：

function classList(elem){
   var classList = elem.attr('class').split(/\s+/);
    var classes = new Array(classList.length);
    $.each( classList, function(index, item){
        classes[index] = item;
    });

    return classes;
}

将jQuery元素传递给函数，这样一个示例调用将是：

var myClasses = classList($('#myElement'));

• 为什么要遍历classList数组，将所有元素添加到classes数组并返回classes数组？只是返回classList应该做同样的事情，对不对？
• 不。因为我们指的是同一元素有很多类的情况。如果很简单，我们就不在此线程上：)
• 该线程是关于返回类列表的，只需返回$(elem).attr(class).split(\s+)即可。可能是Im误会了，但是我看不出有任何理由要遍历一个集合，将内容复制到一个新集合中并返回该新集合。

以上就是短码网小编为大家整理的《javascript 使用jQuery获取元素的类列表》相关内容，希望大家喜欢。