jQuery hasClass()-複数のクラスをチェックします


162

と:

if(element.hasClass("class"))

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

使ってます:

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

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

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

残念ながら動作しません。

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

回答:


227

どうですか:

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

9
いいえ、両方のクラスを持つ要素が検索されるためです。マルセルは、いくつかのクラスの1つ以上の要素を探していると思います。
Giles Van Gruisen、2010

たった今、4つのid = "hello"要素があることに気づきました。バリデーターを幸せにするための修正バージョン:jsbin.com/uqoku/2/edit
Matchu

1
@Matchu私は同じ問題を抱えて.hasClass()いましたが、あなたの解決策はうまくいったようです、ありがとう
Nasir

11
これは私に$('element').is('.class1.class2')はうまく
いき

6
@iamchriswick:OPが求めていたものとは少し異なります。両方のクラス.class1.class2を持つ要素に一致しますが、どちらかのクラスに一致する要素を探していました。
マッチ

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

動作します、しかし、それはだ35%遅くなるより

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

ここに画像の説明を入力してください

私の言っていることが疑わしい場合は、jsperf.comで確認できます。

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


16
19%遅く、大したことです。プログラマーはより高価です。
Nowaker

21
@DamianNowakそれらのプログラマーがほんのわずかな量のコードに相当する量を書くことを望んでいない場合、おそらく非常に高価なコードではありません。
アクマ

2
...ええと、私はこれをChrome 21.0.1180のjsperfで実行したところ、is()メソッドが約20%高速になりました。しかし、hasClass()の方が読みやすいようです。
Danyal Aytekin 2012

3
@psychobrm:一度に10個のクラスをチェックする必要がある場合、クラス名を合理化することが本当に必要です。そのようなナンセンスの理由はありません。:)
cHao 2013

5
個人的にはパフォーマンス最適化の必要性を理解できません。1秒あたり12000回の操作は、私には十分高速に思えます。私はあなたに似合っている方を使用すると思います。必要に応じてパフォーマンスを最適化します。
3Dom 2015

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がないため、グローバルが作成されています。
グレムウェル、2014

4
少しマイナーなポイントですが、パラメーターセレクターは実際には名前付きクラスまたはclassNamesである必要があります。これは、セレクターではなく、渡されるものだからです。$( '#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を返します。
Isaac Lubow 2018

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");
}

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

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

ちなみに、これは最速の方法です:http : //jsperf.com/hasclass-vs-is-stackoverflow/22


この回答のように、クラスをループして文字列のindexOfテストを使用すると、さらに高速になる可能性があると
思い


0

あなたはこのようにすることができます:

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

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

-1

これは私のために働きました:

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

3
この回答は、尋ねられた質問とは関係ありません。
Thomas

これは実際には素晴らしい答えです。上記のセレクター構文は、class1とclass2の両方を持つすべての要素を取得します。次に、あなたはそれで好きなことをすることができます、この場合は追加します。他の方法と比較してパフォーマンスを確認していませんが、構文は素晴らしく簡潔です。
Tim Wright、

2
@TimWrightこれは恐ろしい答えです。2つのクラスを$('.class1.class2')持つ要素を選択する通常の方法は、2番目のクラスに属性セレクターを使用する必要がないことです。また、問題は、すべてではなく、いずれかのクラスで要素を選択する方法を尋ねることです。
すべての労働者は必須です
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.