使用jQuery获取元素的类列表

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

前。

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

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

805899 次浏览
小开
最佳答案

您可以使用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
}
});
小开

有点晚了，但是使用扩展（）函数可以对任何元素调用“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);
小开

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

$(element)[0].classList

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

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

小开

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

在我的脚本中，我想要一个<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");}
}
});
}
小开

为什么没有人简单地列出。

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

编辑：在/\s+/而不是' '上拆分以修复@美国市场的异议。（感谢@YashaOlatoto。）

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


//do something


});
小开

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

这是我为演示和测试http://jsfiddle.net/GD8Qn/8/而设置的jsFiddle

缩小的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);
小开 
$('div').attr('class').split(' ').each(function(cls){ console.log(cls);})
小开

JavaScript为dom中的节点元素提供了一个类列表属性。简单地使用 

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

}）；

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

小开

更新时间：

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

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

或更现代

const classes = element.classList;

旧：

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

因为类被添加和删除，所以类字符串之间可能有多个空格…例如“类1类2类3”…

这将变成['class 1'，'class 2','','','', 'class 3']。

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

小开

也许这也可以帮助你。我用这个函数来获取儿童元素的类…

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];。

小开

你应该试试这个：

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

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

小开

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

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

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

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

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

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

在我的案例中，这奏效了： 

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

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

希望有帮助。

小开

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

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

对于添加或删除任何类，我们可以如下所示。

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

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


提交答案