JQuery .hasClass用于if语句中的多个值
我有一个简单的if语句：
if ($('html').hasClass('m320')) { // do stuff } 这按预期工作。 但是，我想添加更多的类到if statement来检查是否存在任何类在<html>标记。 我需要它，所以它不是所有的人，但至less有一个类的存在，但它可以更多。
我的用例是，我有类（例如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 }
这些似乎没有工作。 不知道我在做什么错，但很可能是我的语法或结构。
你在第二次尝试时只是弄了一些括号。
var $html = $("html"); if ($html.hasClass('m320') || $html.hasClass('m768')) { // do stuff }
你可以使用is()而不是hasClass() ：
if ($('html').is('.m320, .m768')) { ... }
为了好玩，我写了一个小的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/
这可能是另一个解决scheme：
if ($('html').attr('class').match(/m320|m768/)) { // do stuff }
根据jsperf.com也是相当快的。
对于想知道所有这些不同选项的不同性能方面的人，我在这里创build了一个jsperf的例子： jsperf
总之，使用element.hasClass('class')是最快的。
接下来最好的赌注是使用elem.hasClass('classA') || elem.hasClass('classB') elem.hasClass('classA') || elem.hasClass('classB') 。 关于这一点的说明：顺序很重要！ 如果“classA”类更容易find，请先列出！ OR条件语句只要满足其中之一就会返回。
目前为止performance最差的是使用element.is('.class') 。
在jsperf中列出的还有CyberMonk的function和Kolja的解决scheme 。
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')当然需要防弹，因为它至less有一个参数。
var classes = $('html')[0].className; if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) { //do something }
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(); });
我已经在hasClass方法的参数中testing了多个类，它按预期工作。
$('el').hasClass('first-class second-class');
这是为了防止你需要两门课。 对于任何一个或逻辑只是使用||
$('el').hasClass('first-class') || $('el').hasClass('second-class')
随意根据需要进行优化
尝试这个：
if ($('html').hasClass('class1 class2')) { // do stuff }
