javascript - JQuery .hasClass 用于 if 语句中的多个值

Question

我有一个简单的 if 语句：

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

// do stuff 

}

这按预期工作。但是，我想向中添加更多类以检查标记if statement中是否存在任何类。<html>我需要它，所以它不是全部，而只是至少一个班级的存在，但它可以更多。

我的用例是我为各种视口宽度添加了类（例如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 

    }

但这些似乎都不起作用。不确定我做错了什么，但很可能是我的语法或结构。

score 170 · Accepted Answer

170

您可以使用is()而不是hasClass()：

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

于 2012-05-11T21:58:06.730 回答

score 75 · Accepted Answer

您在第二次尝试中只是有一些混乱的括号。

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 条件语句在满足其中之一时立即返回。

到目前为止，性能最差的是使用element.is('.class').

jsperf 中还列出了 CyberMonk的功能和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') 当然需要防弹，因为它至少假设一个论点。

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 - JQuery .hasClass 用于 if 语句中的多个值

10 回答 10

Related

Reference