web-dev-qa-db-ja.com

jQuery hasClass（）-複数のクラスを確認する

と：

if(element.hasClass("class"))

1つのクラスを確認できますが、「要素」に多くのクラスがあるかどうかを確認する簡単な方法はありますか？

私は使っている：

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

それほど悪くはありませんが、次のようなことを考えています。

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

残念ながら機能しません。

そのようなものはありますか？

jqueryperformancejquery-selectors
150
Hans

どうですか：

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

動作します、butそれは35％遅い

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

enter image description here

私の言うことを疑う場合は、 jsperf.com で確認できます。

これが誰かを助けることを願っています。

281
Simon Arnold
$.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']);

これは、シンプルで簡単なことです。

36
Kalel Wade

filter（） は別のオプションです

一致する要素のセットをセレクターに一致するものに減らすか、関数のテストに合格します。

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

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

これはどう？

if (element.hasClass("class1 class2")
5
Robert Łoziński

これは、次の構文に従う回答です

$(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/1

4
Henrik Myntti

これはどうですか、

$.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
ocanal

どうですか：

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

私のために働く：

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

 //do something here

 }
0
Rangel R. Morais

デフォルトのjs match（）関数を使用します：

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

正規表現で変数を使用するには、これを使用します：

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

ところで、これは最速の方法です： http://jsperf.com/hasclass-vs-is-stackoverflow/22

0
Romualds Cirsis