如何使用 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

所有的答案都很好而且很恰当。但是，如果您经常需要这样的函数，您也可以对 hasClass 方法进行 Monkey Patch 来执行您想要的操作：

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");

您可以使用提到的 filter 函数，但这会比较慢，因此如果您有选择，请在单个选择器中对其进行编码。

没有必要为已支持的功能（可通过不同的语法使用）扩展 jQuery。如果您坚持使用数组作为输入，加入它 在选择器中：

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

Answer 3

这将仅选择至少具有这 3 个类之一的

元素。

尝试一下： 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/< /a>

这个小脚本选择所有

并用其类属性的文本填充它们，然后过滤到仅那些类为 'red'、'green' 或 ' blue' 并应用一个额外的类来突出显示它们。希望这能让您对自己的选择范围有一个很好的了解。

Answer 6

使用 jQuery 确定元素是否具有 CSS 类

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