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(),但实际的类名可能并不一定知道。
当前回答
获取应用于元素的类列表,我们可以使用
$('#elementID').prop('classList')
要添加或删除任何类,我们可以按照下面的步骤。
$('#elementID').prop('classList').add('yourClassName')
$('#elementID').prop('classList').remove('yourClassName')
为了简单地检查类是否存在,我们可以使用hasClass
其他回答
为什么没有人简单的上市。
$(element).attr("class").split(/\s+/);
编辑:分裂/\s+/而不是' '修复@MarkAmery的反对。(谢谢@YashaOlatoto。)
有点晚了,但是使用extend()函数可以让你在任何元素上调用“hasClass()”,例如: var hasClass = $('#divId').hasClass(' someeclass ');
(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);
对于image类型的元素,我也遇到了类似的问题。我需要检查元素是否属于特定的类。首先我尝试了:
$('<img>').hasClass("nameOfMyClass");
但我得到了一个漂亮的“这个函数不适用于这个元素”。
然后我在DOM资源管理器上检查了我的元素,我看到了一个可以使用的非常好的属性:className。它包含元素中所有类的名称,用空格分隔。
$('img').className // it contains "class1 class2 class3"
一旦你得到这个,就像往常一样分割字符串。
在我的情况下,这是有效的:
var listOfClassesOfMyElement= $('img').className.split(" ");
我假设这将与其他类型的元素(除了img)一起工作。
希望能有所帮助。
更新:
正如@莱恩·伦纳德指出的那样,我的回答并没有真正解决我自己提出的问题……你需要修剪和删除双空格(例如)字符串。替换(/ +/g, " ")..或者你可以分开坐电车。然后使用(例如)arr.filter(Boolean)删除空值。
const classes = element.className.split(' ').filter(Boolean);
或者更现代
const classes = element.classList;
旧:
对于所有给出的答案,你不应该忘记使用.trim()(或$.trim())
因为类会被添加和删除,所以在类字符串之间可能会有多个空格。如。'class1 class2 class3'..
这将变成[class1, class2 ','','','', ' 类别3 ']. .
当你使用修剪,所有的多个空格被删除。
问题是Jquery是用来做什么的。
$('.dolor_spec').each(function(){ //do stuff
为什么没有人给出.find()作为答案?
$('div').find('.dolor_spec').each(function(){
..
});
非ie浏览器也有classList:
if element.classList.contains("dolor_spec") { //do stuff