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

Question

私はそのような単純な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 

    }

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

score 170 · Accepted Answer

170

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

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

于 2012-05-11T21:58:06.730 に答える

score 75 · Accepted Answer

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

var $html = $("html");

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

  // do stuff 

}

score 31 · Accepted Answer

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

score 28 · Accepted Answer

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

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

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

score 5 · Accepted Answer

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

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

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

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

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

score 3 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

score -1 · Accepted Answer

-1

これを試して：

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

// do stuff 

}

于 2016-10-14T11:49:51.467 に答える

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

10 に答える 10

Related

Reference