JQuery的.hasClass多個值在if語句

我有一個簡單的if語句這樣：JQuery的.hasClass多個值在if語句

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

// do stuff 

}

可正常工作。但是，我想向if statement添加更多類以檢查<html>標記中是否存在任何類。我需要它，所以它不是全部，但只有至少一個類的存在，但它可以更多。

我的使用案例是我爲各種視口寬度添加了類（例如m320,m768），所以我只想執行某些JQuery，如果它是一個特定的寬度（類）。

這裏是我到目前爲止已經試過：

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

// do stuff 

}

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

// do stuff 

}

if ($('html').hasClass(['m320', 'm768'])) { 

// do stuff 

    }

這些都不似乎工作雖然。不知道我做錯了什麼，但很可能是我的語法或結構。

來源

2012-05-11 Danny Englander

而是如何在API的作品，你應該閱讀文檔猜測的隨意優化。 http://api.jquery.com/hasclass/另外，您應該在開發過程中方便地打開開發者的控制檯。 –

[jQuery hasClass（） - 檢查多個類的可能的重複]（http://stackoverflow.com/questions/2214952/jquery-hasclass-check-for-more-than-one-class） –

你剛剛在你的第二次嘗試中弄亂了一些括號。

var $html = $("html"); 

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

    // do stuff 

}

來源

2012-05-11 21:57:59

完美，謝謝！ –

你真的應該將'$（'html'）'緩存到一個變量中，而不必多次查找它。 – epascarello

@epascarello非常真實的，更新後人的答案。 –

122

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

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

來源

2012-05-11 21:58:06 elclanrs

是''hasClass（）'可能更快，但是'（）'在大多數情況下更方便 – elclanrs

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

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

來源

2012-05-11 22:06:53 adeneo

如果你打算這麼做，爲什麼還要用jQuery來獲取元素？ –

嗯，我不會，但至少它只會獲得一次課程？它只是沒有一點jQuery，所以我覺得很枯燥，所以我用一些jQ魔術替換了getElementsByTagName！ – adeneo

爲了好玩，我寫了一個小的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/

來源

2012-05-11 22:11:28 jfriend00

非常好，這個效果很好......跨瀏覽器！在FF和IE上測試。 – crmpicco

我做了一個微調，使它符合.addClass和.removeClass（）的jQuery約定。（http://stackoverflow.com/a/14887517/170456） – CyberMonk

這裏是由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') 需要防彈，當然，因爲它至少有一個參數。

來源

2013-02-15 02:32:24 CyberMonk

這可能是另一種解決方案：

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

根據jsperf.com這是相當快了。

來源

2013-05-31 13:50:30 Kolja

非常好，快得多！ – Philip

這也將匹配類'ZZZm320WWW'等。嘗試......匹配（/ \ b（m320 | m768）\ b /），其中\ b匹配單詞的開頭和結尾。 –

對於任何想了解一些與所有這些不同的選擇不同性能的方面，我創建了這裏jsperf情況：jsperf

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

接下來最好的辦法是使用elem.hasClass('classA') || elem.hasClass('classB')。關於這一點的說明：訂單很重要！如果班級'classA'更容易找到，請先列出！ OR條件語句只要滿足其中一個就會返回。

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

另外在jsperf中列出的是CyberMonk's function和Kolja's solution。

來源

2013-11-30 00:34:53

真有意思！我不知道jsperf。感謝您展示所有不同的變化。 –

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

來源

2016-10-12 14:25:48

-3

試試這個：

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

// do stuff 

}

來源

2016-10-14 11:49:51

歡迎來到Stack Overflow！請爲此代碼添加一些解釋來幫助OP。這將有助於提供未來觀衆可以從中學習的答案。有關更多信息，請參閱[答案]。 –

我已經在測試多個類hasClass方法的參數，它按預期工作。

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

這是萬一你需要這兩個類的存在。對於任何一種或邏輯，只需使用||

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

需要

來源

2017-11-09 17:29:03

JQuery的.hasClass多個值在if語句

回答

相關問題