jQuery中是否有一种方法可以循环遍历或分配给数组中所有被分配给元素的类?
ex.
<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>
我将寻找一个“特殊”类,如上面的“dolor_spec”。我知道我可以使用hasClass(),但实际的类名可能并不一定知道。
jQuery中是否有一种方法可以循环遍历或分配给数组中所有被分配给元素的类?
ex.
<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>
我将寻找一个“特殊”类,如上面的“dolor_spec”。我知道我可以使用hasClass(),但实际的类名可能并不一定知道。
当前回答
为什么没有人简单的上市。
$(element).attr("class").split(/\s+/);
编辑:分裂/\s+/而不是' '修复@MarkAmery的反对。(谢谢@YashaOlatoto。)
其他回答
你可以使用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
}
});
更新:
正如@莱恩·伦纳德指出的那样,我的回答并没有真正解决我自己提出的问题……你需要修剪和删除双空格(例如)字符串。替换(/ +/g, " ")..或者你可以分开坐电车。然后使用(例如)arr.filter(Boolean)删除空值。
const classes = element.className.split(' ').filter(Boolean);
或者更现代
const classes = element.classList;
旧:
对于所有给出的答案,你不应该忘记使用.trim()(或$.trim())
因为类会被添加和删除,所以在类字符串之间可能会有多个空格。如。'class1 class2 class3'..
这将变成[class1, class2 ','','','', ' 类别3 ']. .
当你使用修剪,所有的多个空格被删除。
感谢这一点-我有一个类似的问题,因为我试图通过编程将对象与分层类名联系起来,即使这些名称可能不一定是我的脚本所知道的。
在我的脚本中,我想要一个<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");}
}
});
}
下面是一个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);
var classList = $(element).attr('class').split(/\s+/);
$(classList).each(function(index){
//do something
});