JQuery .hasClass 用于 if 语句中的多个值答案

【问题标题】：JQuery .hasClass for multiple values in an if statementJQuery .hasClass 用于 if 语句中的多个值
【发布时间】：2012-05-20 12:14:48
【问题描述】：

我有一个简单的 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 

    }

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

【问题讨论】：

您应该阅读文档，而不是猜测 API 的工作原理。 api.jquery.com/hasclass 此外，您应该在开发过程中方便/打开开发者控制台。
jQuery hasClass() - check for more than one class的可能重复

标签： javascript jquery syntax logic

【解决方案1】：

您可以使用is() 代替hasClass()：

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

【讨论】：

是的，hasClass() 可能更快，但is() 大多数时候更方便
顺便说一句 here 我们可以看到 is() 和 hasClass() 的性能基准
所以它慢了很多，但总体上也超级快。如果只扫描几个项目，对于更简洁的代码来说似乎没什么大不了的。
信息："is" 匹配 a OR b 类，"hasClass" 匹配 a AND b 类

【解决方案2】：

您在第二次尝试时括号弄乱了。

var $html = $("html");

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

  // do stuff 

}

【讨论】：

您确实应该将$('html') 缓存到一个变量中，而不必多次查找。
@epascarello 非常正确，正在为后代更新答案。

【解决方案3】：

为了好玩，我写了一个小的 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/

【讨论】：

太棒了，这很好用……也可以跨浏览器！在 FF 和 IE 上测试。
我做了一个小修改以使其符合 .addClass 和 .removeClass() 的 jQuery 约定。 (stackoverflow.com/a/14887517/170456)

【解决方案4】：

这可能是另一种解决方案：

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

根据jsperf.com，它也相当快。

【讨论】：

非常好，更快！
这也将匹配类 'ZZZm320WWW' 等。尝试 ...match(/\b(m320|m768)\b/)，其中 \b 匹配单词的开头和结尾。
只是为了跟进（7年后:)）。这很好用，但是如果您定义的 html 元素没有任何类 - 它会发出“无法读取未定义的属性“匹配””错误。如果是这种情况，请测试元素是否甚至具有 'class' 属性（或测试以确保属性 'class' 不为空）。

【解决方案5】：

对于任何想了解所有这些不同选项的不同性能方面的人，我在这里创建了一个 jsperf 案例：jsperf

总之，使用element.hasClass('class')是最快的。

下一个最佳选择是使用elem.hasClass('classA') || elem.hasClass('classB')。关于这一点的说明：订单很重要！如果更可能找到类“classA”，请先列出它！ OR 条件语句在满足其中一个时立即返回。

目前表现最差的是使用element.is('.class')。

jsperf 中还列出了CyberMonk's function 和Kolja's solution。

【讨论】：

真的很有趣！我不知道jsperf。感谢您说明所有不同的变化。

【解决方案6】：

以下是 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') 当然，需要防弹，因为它至少假设一个论点。

【讨论】：

【解决方案7】：

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

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

【讨论】：

如果你要这样做，为什么还要麻烦使用 jquery 来获取元素？
好吧，我不会，但至少它只获得一次课程？没有一点 jQuery 就显得很乏味，所以我用一些 jQ 魔法替换了 getElementsByTagName！

【解决方案8】：

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

【讨论】：

【解决方案9】：

这是在你需要两个类的情况下。对于任何一个或逻辑，只需使用 ||

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

根据需要随意优化

【讨论】：

这是错误的。您给出的第一个示例之所以有效，是因为该方法对输入的清理效果不佳，并且认为整个字符串是一个类名。如果类的顺序不同，或者彼此不相邻，则它不起作用。参见示例：jsfiddle.net/0d57ekty
@MightyPork 感谢您的检查。你是对的，它应该只在每个班级使用

【解决方案10】：

试试这个：

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

// do stuff 

}

【讨论】：

欢迎来到 Stack Overflow！请添加一些解释为什么此代码有助于 OP。这将有助于为未来的观众提供一个可以学习的答案。请参阅How to Answer 了解更多信息。