jQuery hasClass() - 检查多个类

问题描述 投票:148回答:11

附:

if(element.hasClass("class"))

我可以检查一个类,但有一个简单的方法来检查“元素”是否有任何类?

我在用:

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

这不是太糟糕,但我想的是:

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

遗憾的是,这不起作用。

有类似的东西吗?

jquery performance jquery-selectors
11个回答
209
投票

怎么样:

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

0
投票

适合我:

 if ( $("element").hasClass( "class1") || $("element").hasClass("class2") ) {

 //do something here

 }

-1
投票

这对我有用:

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

280
投票
element.is('.class1, .class2')

有效,但比它慢35%

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

如果你怀疑我说的话,你可以在jsperf.com上验证。

希望这能有所帮助。


36
投票
$.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']);

这应该做到,简单易行。


9
投票

filter()是另一种选择

将匹配元素集减少到与选择器匹配的元素或传递函数的测试。

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

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

5
投票

这个怎么样?

if (element.hasClass("class1 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


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){
    //...
}

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

© www.soinside.com 2019 - 2024. All rights reserved.