使用 jQuery 访问具有多个类的元素

Posted

技术标签:

【中文标题】使用 jQuery 访问具有多个类的元素【英文标题】:Access elements having multiple classes using jQuery 【发布时间】:2012-09-24 05:57:12 【问题描述】:

有时我们定义了一些具有多个类的元素,例如:-

<div class="a b c"> Hi this is div with multiple classes </div>

现在,我想使用 jQuery 选择器访问这个 div 所以我在尝试:-

var cls = "a b c"; 
$("." + cls); // Returns []

这是有道理的,因为它实际上是在尝试查找类名为“a”的所有元素,然后尝试在具有类“a”的元素内部进一步查找子元素“b”和“c”,这在语义上是错误的。所以我找到了一种方法来找到这样的元素:-

var a = "mk-search-contents boundary-top";
var all = $("div"); // Assuming I know the tagname if element i am interested in

for (var i=0; i<all.length; i++) 
    if (all.get(i).className == a)  console.log(all.get(i)); break; 

它给了我正确的答案,但我不明白,为什么这是有效的,以及如何使用 jQuery 选择这样的元素。

【问题讨论】:

嘿,dystroy..对此我感到非常抱歉。我没有看到时间,也没有阅读 cmets。我刚刚尝试了答案并勾选了显示在顶部的那个..BTW 更正了它。 【参考方案1】:

只需使用这个选择器:

$('.a.b.c')

className 为您提供所有由空格分隔的类名称(“a b c”)。但是对于 css 和 jquery 选择器,你不能使用“a b c”。

你所做的是

$('.a b c')

表示“a 类元素中 b 元素中的 c 元素”。

【讨论】:

【参考方案2】:

尝试下面的选择器来匹配所有三个类

$('.a.b.c')

如果你想匹配三个中的任何一个

$('.a,.b,.c')

【讨论】:

否:这将匹配具有三个类中的任何一个的元素,而不是所有三个类。 对于所有三个类 $('.a.b.c'); 时间戳是一个奇妙的东西:P

以上是关于使用 jQuery 访问具有多个类的元素的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery 获取不是具有特定 CSS 类的容器的子元素的元素的后代

如何使用 jQuery 检索具有特定类的众多元素的 .length?

从使用 jQuery 的代码中指定的元素中选择具有给定类的下一个元素

使用 jQuery 将多个 CSS 类的 Javascript 数组分配给一个元素

jQuery 需要帮助在具有特定类的 div 元素中选择 tr 元素

jQuery hide()所有具有特定类的元素,除了具有特定父元素的所有元素