jQuery hasClass()-检查多个类


162

带有:

if(element.hasClass("class"))

我可以检查一个类,但是有没有一种简单的方法可以检查“元素”是否具有多个类呢?

我在用:

if(element.hasClass("class") || element.hasClass("class") ... )

这还不错,但是我在想类似的东西:

if(element.hasClass("class", "class2")

不幸的是,这不起作用。

有那样的东西吗?

Answers:


227

怎么样:

element.is('.class1, .class2')

9
不,因为那样会查找同时具有两个类的元素。我认为Marcel正在寻找具有多个类中一个或多个的元素。
吉尔斯·范·格鲁森(Gilles Van Gruisen)2010年

刚才注意到,我在那里有4个id =“ hello”元素。为了使验证者感到满意的固定版本:jsbin.com/uqoku/2/edit
Matchu 2010年

1
@Matchu我遇到了同样的问题,.hasClass()但是您的解决方案似乎已经解决了问题,谢谢
Nasir

11
这对我$('element').is('.class1.class2')没有用,但对我来说
有用

6
@iamchriswick:与OP要求的稍有不同。.class1.class2将匹配元素有两个班,但他们正在寻找匹配的元素或者类。
Matchu

291
element.is('.class1, .class2')

的作品,它是35%慢

element.hasClass('class1') || element.hasClass('class2')

在此处输入图片说明

如果您怀疑我在说什么,可以在jsperf.com上进行验证。

希望这可以帮助某人。


16
慢19%,大不了。程序员更昂贵。
Nowaker 2012年

21
@DamianNowak,如果那些程序员不愿意写一些琐碎的代码,那么它们可能并不是很昂贵。
Akkuma 2012年

2
...嗯,但是我只是在jsperf中为Chrome 21.0.1180运行了此操作,而is()方法现在快了约20%。但是hasClass()似乎更具可读性。
Danyal Aytekin 2012年

3
@psychobrm:如果您必须一次检查10个班级,那么您真正需要的是简化班级名称。没有任何胡说八道的理由。:)
cHao 2013年

5
个人看不到性能优化的需要。对我来说,每秒12000次操作似乎足够快。我会说使用对您更好的那个。在需要时优化性能。
3Dom

38
$.fn.extend({
    hasClasses: function (selectors) {
        var self = this;
        for (var i in selectors) {
            if ($(self).hasClass(selectors[i])) 
                return true;
        }
        return false;
    }
});

$('#element').hasClasses(['class1', 'class2', 'class3']);

这应该做到,简单又容易。


2
您在for(选择器中的i)中缺少var,因此创建了一个全局变量。
gremwell 2014年

4
有点小要点,但是参数选择器实际上应该命名为classesclassNames,因为这是您要传递的,而不是选择器。选择器在它们前面会有一个点,如$('#element')。hasClasses(['。class1','.class2','.class3']);一样。
jbyrd 2014年

10

filter()是另一种选择

将匹配元素的集合减少到与选择器匹配或通过功能测试的元素。

$(selector).filter('.class1, .class2'); //Filter elements: class1 OR class2

$(selector).filter('.class1.class2'); // Filter elements: class1 AND class2


4

这是一个确实遵循以下语法的答案

$(element).hasAnyOfClasses("class1","class2","class3")
(function($){
    $.fn.hasAnyOfClasses = function(){
        for(var i= 0, il=arguments.length; i<il; i++){
            if($self.hasClass(arguments[i])) return true;
        }
        return false;
    }
})(jQuery);

它不是最快的,但是它是明确的,也是我更喜欢的解决方案。板凳:http//jsperf.com/hasclasstest/10


Error: $self is not defined
bagofmilk

1
@bagofmilk自6年前撰写以来,我的回复已被其他人编辑。由于我已经好几年没有使用jQuery了,所以我不知道编辑的确切目的,但最初我var $self = $(this);只是在for循环之前
Henrik Myntti

1

那这个呢,

$.fn.extend({
     hasClasses: function( selector ) {
        var classNamesRegex = new RegExp("( " + selector.replace(/ +/g,"").replace(/,/g, " | ") + " )"),
            rclass = /[\n\t\r]/g,
            i = 0,
            l = this.length;
        for ( ; i < l; i++ ) {
            if ( this[i].nodeType === 1 && classNamesRegex.test((" " + this[i].className + " ").replace(rclass, " "))) {
                return true;
            }
        }
        return false;
    }
});

易于使用,

if ( $("selector").hasClasses("class1, class2, class3") ) {
  //Yes It does
}

而且似乎更快, http://jsperf.com/hasclasstest/7


1

关于什么:

if($('.class.class2.class3').length > 0){
    //...
}

3
您不需要 > 0。如果长度不为零,则返回true。
艾萨克·卢博

1

jQuery的

if( ['class', 'class2'].some(c => [...element[0].classList].includes(c)) )

香草JS

if( ['class', 'class2'].some(c => [...element.classList].includes(c)) )

0

使用默认的js match()函数:

if( element.attr('class') !== undefined && element.attr('class').match(/class1|class2|class3|class4|class5/) ) {
  console.log("match");
}

要在regexp中使用变量,请使用以下命令:

var reg = new RegExp(variable, 'g');
$(this).match(reg);

顺便说一下,这是最快的方法:http : //jsperf.com/hasclass-vs-is-stackoverflow/22


最好的答案是这个,尽管我怀疑循环遍历类并使用字符串indexOf测试可能甚至更快……
2015年


0

您可以这样做:

if($(selector).filter('.class1, .class2').length){
    // Or logic
}

if($(selector).filter('.class1, .class2').length){
    // And logic
}

-1

这对我有用:

$('.class1[class~="class2"]').append('something');

3
这个答案与提出的问题无关。
Jezen Thomas

这实际上是一个很好的答案。上面的选择器语法捕获具有class1和class2的所有元素。然后,您可以使用它来做您喜欢的事情,在本例中为追加。与其他方法相比,还没有检查性能,但是语法很好且简洁。
蒂姆·赖特

2
@TimWright这是一个糟糕的答案。选择具有2个类的元素的通常方法是$('.class1.class2')不需要为第二个类使用属性选择器。另外,问题是要问如何通过任何而不是所有类之一来选择元素。
所有工人都是必不可少的
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.