web-dev-qa-db-ja.com

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

そのような単純なifステートメントがあります。

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

// do stuff 

}

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

私のユースケースは、さまざまなビューポートの幅に追加されたクラス（例：m320、m768）があるため、特定のJqueryが特定の幅（クラス）である場合にのみ実行することです。

ここに私が今まで試したことがある：

1。

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

// do stuff 

}

2。

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

 // do stuff 

}

3。

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

 // do stuff 

    }

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

javascriptjquerysyntaxlogic
76
Danny Englander

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

var $html = $("html");

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

  // do stuff 

}
66
James Montagne

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

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

楽しみのために、複数のクラス名のいずれかをチェックする小さな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/

25
jfriend00

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

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

jsperf.com によれば、これも非常に高速です。

24
Kolja

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

つまり、element.hasClass('class')を使用するのが最速です。

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

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

Jsperfには Cyber​​Monkの関数 、および Koljaの解 もリストされています。

5
Ryan Steffer

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つの引数を想定しているため、防弾が必要です。

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

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

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();
});
0
Ron Sims II

HasClassメソッドのパラメーターで複数のクラスをテストしましたが、期待どおりに機能します。

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

これは、両方のクラスが存在する必要がある場合です。どちらかまたはロジックの場合は||を使用します

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

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

0
qwerty_igor