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 

    }

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

Answer 1

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

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

Answer 2

你在第二次尝试中只是弄乱了一些括号。

var $html = $("html");

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

  // do stuff 

}

Answer 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/

Answer 4

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

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

根据jsperf.com它也很快。

Answer 5

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

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

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

迄今为止最糟糕的表现是使用element.is('.class')。

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

Answer 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') 当然，需要防弹，因为它至少有一个论点。

Answer 7

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

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

Answer 8

hasClass方法将接受一个类名数组作为参数，你可以这样做：

@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
 @import url(/resources/assets/vendor/bootstrap/dist/css/bootstrap.css);

 /*# sourceMappingURL=app.css.map */

Answer 9

我在hasClass方法的参数中测试了多个类，它按预期工作。

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

这是为了你需要两个课程。对于其中一个或逻辑，只需使用||

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

随意根据需要进行优化

Answer 10

试试这个：

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

// do stuff 

}

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

10 个答案: