如果一个元素至少有一个类，从指定的类列表中如何检查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