如果一個元素至少有一個類，從指定的類列表中如何檢查jQuery？

Question

示例html：

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="apple"></div>

如果他們沒有“紅色”，“綠色”或“藍色”類，我想循環遍歷div並過濾掉它們。

var onlyColorDivs = $('div').hasClass( __________ );

有沒有辦法填寫上一行中的空白來完成此任務。 或者我是否必須將列表顏色類放在數組中並進行循環？

如果需要澄清，請與我們聯系。

Answer 1

所有的答案都很棒，也很合適。 但是，如果您需要這樣的函數，您還可以使用Monkey Patch的hasClass方法來執行您想要的操作：

var _hasClass = $.fn.hasClass;
$.fn.hasClass = function (classNames) {
  if (!classNames || typeof classNames === "string" ) {
    return _hasClass.call(this, classNames); // Default behavior
  } else {
    // Take array and parse it for the filter method
    var classes = '.' + classNames.join(', .');
    return this.filter(classes).length > 0;
  }
};

然后你可以像這樣使用它：

$("div").hasClass(['red','green','blue']);
// or
$("div").hasClass('green');

JS Bin上的演示

Answer 2

使用傳統的選擇方式有什么問題嗎？

$(".red, .green, .blue");

如果您已經有想要過濾的集合，請說

$("div");

您可以使用上面提到的過濾器功能，但這樣會更慢，因此如果您有選擇，請在單個選擇器中對其進行編碼。

不必使用不同語法擴展jQuery以支持已經支持的功能。 如果你堅持使用數組作為輸入，那么將它加入選擇器會更快：

var classes = new Array("red", "green", "blue");
$("div." + classes.join(",div."));

Answer 3

這將僅選擇具有這3個類中的至少一個的<div>元素。

試一試： http ： //jsfiddle.net/gADQn/

var onlyColorDivs = $('div.red, div.green, div.blue');

Answer 4

.filter('.red,.green,.blue')

應該做的工作。

或者只是最初選擇它們：

$('.red,.green,.blue', context)

Answer 5

.filter（selector）是您正在尋找的功能。 在選擇的jQuery元素上調用此選項將優化選擇與您提供的選擇器匹配的元素。 此外，您只需選擇那些元素即可。

所以要么： $('div').filter('.red, .green, .blue');

或者： $('div.red, div.green, div.blue');

以下是使用過濾功能的文檔： http ： //api.jquery.com/filter/

最后這里是使用它的演示： http ： //jsfiddle.net/Etb7R/

這個小腳本選擇所有<div>並用它們的class屬性的文本填充它們，然后過濾到只有那些類為“red”，“green”或“blue”的類，並應用一個額外的類來突出顯示它們。 希望這應該會讓您對您的選擇范圍有所了解。

Answer 6

確定元素是否具有帶有jQuery的CSS類

http://docs.jquery.com/Traversing/hasClass