ifステートメントの複数の値に対するJQuery.hasClass

81

私はそのような単純なifステートメントを持っています：

if ($('html').hasClass('m320')) {

// do stuff 

}

これは期待どおりに機能します。ただし、にクラスを追加if statementして、<html>タグにクラスが存在するかどうかを確認したいと思います。私はそれが必要なので、それらすべてではなく、少なくとも1つのクラスが存在するだけですが、それ以上になることもあります。

私のユースケースは、さまざまなビューポート幅にクラス（たとえばm320、m768）を追加しているため、特定の幅（クラス）の場合にのみ特定のJqueryを実行したいというものです。

これが私がこれまでに試したことです：

1.1。

if ($('html').hasClass('m320', 'm768')) {

// do stuff 

}

2.2。

if ($('html').hasClass('m320')) || ($('html').hasClass('m768')) {

 // do stuff 

}

3.3。

 if ($('html').hasClass(['m320', 'm768'])) {

 // do stuff 

    }

しかし、これらはどれも機能していないようです。私が間違っていることはわかりませんが、おそらく私の構文または構造です。

— ダニー・イングランド人
ソース

1

APIがどのように機能するかを推測する代わりに、ドキュメントを読む必要があります。api.jquery.com/hasclassまた、開発中は開発者のコンソールを手元に置いて開いておく必要があります。

— 狂気の崖

jQuery hasClass（）の

— Stephan Weinhold

74

2回目の試行で、かっこがめちゃくちゃになりました。

var $html = $("html");

if ($html.hasClass('m320') || $html.hasClass('m768')) {

  // do stuff 

}

— ジェームズモンターニュ
ソース

6

$('html')変数を何度も検索するのではなく、実際に変数にキャッシュする必要があります。

— epascarello 2012年

1

@epascarello非常に真実で、後世のために答えを更新しています。

— James Montagne 2012年

161

is()代わりに使用できますhasClass()：

if ($('html').is('.m320, .m768')) { ... }

— elclanrs
ソース

3

ええhasClass()、おそらくもっと速いですが、is()ほとんどの場合ずっと便利です

— elclanrs 2012年

1

ところで、ここで我々はのための性能ベンチマークを見ることができるis()とhasClass()

— Jignesh Gohel

1

そのため、速度は大幅に低下しますが、全体的には非常に高速です。スキャンされているアイテムが少ない場合は、はるかにクリーンなコードにとって大したことではないようです。

— jerclarke

27

楽しみのために、複数のクラス名のいずれかをチェックする小さなjQueryアドオンメソッドを作成しました。

$.fn.hasAnyClass = function() {
    for (var i = 0; i < arguments.length; i++) {
        if (this.hasClass(arguments[i])) {
            return true;
        }
    }
    return false;
}

次に、あなたの例では、これを使用できます：

if ($('html').hasAnyClass('m320', 'm768')) {

// do stuff 

}

クラス名はいくつでも渡すことができます。

これは、スペースで区切られた複数のクラス名を渡すこともできる拡張バージョンです。

$.fn.hasAnyClass = function() {
    for (var i = 0; i < arguments.length; i++) {
        var classes = arguments[i].split(" ");
        for (var j = 0; j < classes.length; j++) {
            if (this.hasClass(classes[j])) {
                return true;
            }
        }
    }
    return false;
}

if ($('html').hasAnyClass('m320 m768')) {
    // do stuff 
}

作業デモ：http：//jsfiddle.net/jfriend00/uvtSA/

— jfriend00
ソース

すばらしい、これはうまく機能します...クロスブラウザも！FFおよびIEでテスト済み。

— crmpicco 2013年

.addClassと.removeClass（）のjQuery規則に準拠するように少しmodを作成しました。（stackoverflow.com/a/14887517/170456）

— CyberMonk

25

これは別の解決策かもしれません：

if ($('html').attr('class').match(/m320|m768/)) {  
  // do stuff   
}

jsperf.comによると、それも非常に高速です。

— コダラ
ソース

とても素敵で、はるかに速いです！

— フィリップ

9

これは、クラス「ZZZm320WWW」などにも一致します。... match（/ \ b（m320 | m768）\ b /）を試してください。ここで、\ bは単語の最初と最後に一致します。

— Juan Lanus 2014

フォローアップするだけです（7年後:)）。これはうまく機能しますが、定義するhtml要素にクラスがない場合は、「未定義のプロパティ「一致」を読み取れません」というエラーが発生します。この場合、要素に「class」属性があるかどうかをテストします（または、属性「class」がnullでないことを確認するためにテストします）。

— 三亜

5

これらのさまざまなオプションのすべてでさまざまなパフォーマンスの側面について疑問に思っている人のために、ここでjsperfケースを作成しました：jsperf

要するに、使用element.hasClass('class')が最速です。

次善の策はを使用することelem.hasClass('classA') || elem.hasClass('classB')です。これに関する注意：順序が重要です！クラス 'classA'が見つかる可能性が高い場合は、最初にリストしてください。OR条件ステートメントは、それらの1つが満たされるとすぐに返されます。

最悪のパフォーマンスはを使用したことelement.is('.class')でした。

また、jsperfには、CyberMonkの関数とKoljaのソリューションがリストされています。

— ライアン・ステファー
ソース

本当に面白いです！私はjsperfについて知りませんでした。さまざまなバリエーションをすべて説明していただきありがとうございます。

— Danny Englander

3

jfriend00が提供する回答のわずかなバリエーションは次のとおりです。

$.fn.hasAnyClass = function() {
    var classes = arguments[0].split(" ");
    for (var i = 0; i < classes.length; i++) {
        if (this.hasClass(classes[i])) {
            return true;
        }
    }
    return false;
}

.addClass（）および.removeClass（）と同じ構文の使用を許可します。たとえば、.hasAnyClass('m320 m768') 少なくとも1つの引数を想定しているため、もちろん防弾が必要です。

— CyberMonk
ソース

0

var classes = $('html')[0].className;

if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) {
    //do something
}

— アデネオ
ソース

1

それを行うつもりなら、なぜ要素を取得するためにjqueryを使用することさえわざわざするのですか？

— James Montagne 2012年

まあ、私はしませんが、少なくともそれは一度だけクラスを取得しますか？少しのjQueryがないととても鈍いように見えたので、getElementsByTagNameをあなたのためだけのjQマジックに置き換えました！

— adeneo 2012年

0

hasClassメソッドは、クラス名の配列を引数として受け入れます。次のように実行できます。

$(document).ready(function() {
function filterFilesList() {
    var rows = $('.file-row');
    var checked = $("#filterControls :checkbox:checked");

    if (checked.length) {
        var criteriaCollection = [];

        checked.each(function() {
            criteriaCollection.push($(this).val());
        });

        rows.each(function() {
            var row = $(this);
            var rowMatch = row.hasClass(criteriaCollection);

            if (rowMatch) {
                row.show();
            } else {
                row.hide(200);
            }
        });
    } else {
        rows.each(function() {
            $(this).show();
        });
    }
}

    $("#filterControls :checkbox").click(filterFilesList);
    filterFilesList();
});

— ロンシムズII
ソース

0

これは、両方のクラスが存在する必要がある場合です。またはロジックの場合は、||を使用してください。

$('el').hasClass('first-class') || $('el').hasClass('second-class')

必要に応じて自由に最適化してください

— qwerty_igor
ソース

1

これは間違っています。最初に示した例は、メソッドの入力のサニタイズが不十分で、文字列全体がクラス名であると見なしているという理由だけで機能します。クラスの順序が異なる場合、またはクラスが隣り合っていない場合は機能しません。例を参照してください：jsfiddle.net/0d57ekty

— MightyPork

@MightyPorkチェックしてくれてありがとう。そうです、クラスごとにのみ使用する必要があります

— qwerty_igor

-1

これを試して：

if ($('html').hasClass('class1 class2')) {

// do stuff 

}

— RobertŁoziński
ソース

Stack Overflowへようこそ！このコードがOPに役立つ理由の説明を追加してください。これは、将来の視聴者が学ぶことができる答えを提供するのに役立ちます。詳細については、回答方法を参照してください。

— 異端の猿