jQuery .hasClass在if语句中用于多个值

81

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

    }

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

— 丹尼·英格兰
source

1

您不必阅读API的工作原理，而应该阅读文档。api.jquery.com/hasclass另外，在开发过程中，您应该方便/打开开发者的控制台。

— 精神错乱的悬崖

jQuery hasClass（）的

— Stephan Weinhold，2015年

74

您在第二次尝试中就把括号弄乱了。

var $html = $("html");

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

  // do stuff 

}

— 詹姆斯·蒙塔涅
source

6

您确实应该缓存$('html')到一个变量中，而不必多次查找它。

— epascarello

1

@epascarello非常正确，更新了后代的答案。

— 詹姆斯·蒙塔涅2012年

161

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

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

— 氏族
source

3

是啊hasClass()是可能更快，但是is()是方式更方便的大部分时间

— elclanrs

1

顺便说一句，在这里我们可以看到is()和hasClass()

— Jignesh Gohel

1

因此，它的速度要慢很多，但总体上还是超级快。如果仅扫描少量项目，则对于更清晰的代码来说似乎并不重要。

— jerclarke

27

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

— jfriend00
source

太好了，这很好用...跨浏览器！在FF和IE上测试。

— crmpicco

我做了一个略微的修改，使其符合.addClass和.removeClass（）的jQuery约定。（stackoverflow.com/a/14887517/170456）

— CyberMonk

25

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

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

根据jsperf.com，它也非常快。

— 科利亚
source

非常好，快很多！

— 菲利普

9

这也将匹配类“ ZZZm320WWW”等。尝试... match（/ \ b（m320 | m768）\ b /），其中\ b匹配单词的开头和结尾。

— Juan Lanus 2014年

只是要跟进（7年后:)）。这很好用，但是如果您定义的html元素没有任何类-它将发出“无法读取未定义的属性”匹配”错误。如果是这种情况，请测试该元素是否甚至具有'class'属性（或进行测试以确保该属性'class'不为null）。

— 三亚

5

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

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

下一个最佳选择是使用elem.hasClass('classA') || elem.hasClass('classB')。关于这一点的注释：顺序很重要！如果更有可能找到“ classA”类，请首先列出它！条件语句之一被返回时，即返回。

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

jsperf中还列出了CyberMonk的功能和Kolja的解决方案。

— 瑞安·斯特弗（Ryan Steffer）
source

非常有意思！我对jsperf一无所知。感谢您说明所有不同的变化。

— Danny Englander 2013年

3

这是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') 需要至少一个论点，因此当然需要防弹。

— 网络僧侣
source

0

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

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

— 阿德尼奥
source

1

如果要这样做，为什么还要用jquery来获取元素呢？

— 詹姆斯·蒙塔涅

好吧，我不会，但是至少它只能上一次课？没有一点jQuery，它看起来是如此沉闷，所以我用一些jQ魔术代替了getElementsByTagName！

— adeneo

0

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

— 罗恩·西姆斯二世
source

0

这是为了防止您同时需要两个类。对于逻辑或只使用||

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

随时根据需要进行优化

— qwerty_igor
source

1

错了您给出的第一个示例之所以起作用，仅是因为该方法对输入的净化性很差，并且认为整个字符串是一个类名。如果类的顺序不同或彼此相邻，则该类不起作用。参见示例：jsfiddle.net/0d57ekty

— MightyPork

@MightyPork感谢您的检查。没错，它只能按班使用

— qwerty_igor

-1

试试这个：

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

// do stuff 

}

— 罗伯特·奥津斯基
source

欢迎使用Stack Overflow！请添加一些解释，说明此代码为何有助于OP。这将为将来的观众提供一个答案。有关更多信息，请参见如何回答。

— 异端猴子