Jquery检查元素中的多个类（必须全部存在）

Posted 2023-05-08

【中文标题】Jquery检查元素中的多个类（必须全部存在）

【英文标题】：Jquery check for multiple classes (All must be present) in an element

【发布时间】：2016-05-03 19:07:09

【问题描述】：

您好，我正在尝试检查一个元素是否具有我要查找的类：

<span class="foo bar me"></span>

我想检查该元素上是否存在 foo 和 me 类，所以我使用了这个：

$('body span').hasClass('me', 'foo')

这个 foo 和我存储在一个数组中，但是这个没有工作：

var arrayName = ['me', 'foo'];
$('body span').hasClass(arrayName)

我发现的类是动态的，这就是它存储在数组中的原因，如何将像 'me', 'foo' 这样的动态数组传递给 hasClass 函数？

注意：数组中可以有2-4个值。

我的工作在这里：https://jsfiddle.net/pcbttntk/

提前致谢。

更新： $('body span').hasClass('me', 'foo') 不起作用，感谢 brett 和 Roko，它只检查传递给它的第一个类。

【问题讨论】：

错了：.hasClass('me', 'foo').

可能重复。请看***.com/a/10559177/520544

嗨，Jörn，这个例子是数组中的所有类必须存在于该特定元素上，该问题的答案只是检查元素上是否存在类之一，它检查的类不是动态的。

@Cedric 是的，你是对的。我已经删除了我的答案。

【参考方案1】：

拥有：

<span class="foo bar me"></span>

同时拥有 me 和 foo 类：

$('span').is(".foo.me");

使用类数组，您可以使用.join() 来获取所需的字符串选择器".foo.me"，例如：

var classes = ['me', 'foo'];
$('span').is("."+ classes.join("."));   

或更简单：

var classes = ['.me', '.foo']; // (Notice the `.`)
$('span').is(classes.join(""));

---

回顾一下，.hasClass('me', 'foo') 基本上是错误的，因为.hasClass() 只接受一个参数

【讨论】：

嗨 roko，console.log( $('span').is(classes.join(""))); 这样做，但类必须按时间顺序排列，我的示例中的数组不是也不会在我的情况下工作，因为数组是动态的并不总是按时间顺序，我不知道为什么，但console.log($('body span').hasClass('bar', 'me')); 有效

@Cedric 有效，因为 "bar" 是唯一考虑的类，并且您的元素在逻辑上具有该类。

但在我的情况下，我需要 bar 和 me 在该类中，如果 me 不存在，它应该抛出 false

@Cedric 我给了你 2 个可能的变体，还有什么不清楚的？看这个例子：jsbin.com/xalotac/1/edit?html,js,console,output 你显然对&& 变体感兴趣（又名：“必须有所有指定的类”）。看来你睡眠不足：D

@Cedric 不客气！ （仔细阅读，我在第二个例子中已经说明它使用了['.me', '.foo']; // (Notice the .)）

【参考方案2】：

jQuery 的.hasClass() 只接受一个类，作为一个字符串（根据docs）。

要测试多个动态类，您可以使用.is()：

var class1 = 'me';
var class2 = 'foo';

arrayNames = [class1, class2];

console.log($('body span').is(arrayNames.map(function(className) return '.'+ className;).join(',')));

这是JSFiddle。

【讨论】：

嗨，布雷特，这个检查该元素上是否存在任何类，我必须检查该特定元素上是否存在所有类。

.is() 函数在我的情况下不能使用，因为在检查该元素上是否存在类时，它的条件是 or 而不是 and。

@Roko，这些类需要有一个 . 前缀。

我如何同时使用 . 前缀和附加 , 使用 join()？

@BrettDeWoody 你看到我的回答了吗？