我如何 select 一个具有多个 类 的元素

How do I select an element with multiple classes in order

我想 select 所有具有两个 class 的元素,a 和 b,按此顺序

<element class="a b">

当我使用 $(".a + .b") 时,我会以任一顺序获得包含两个 classes 的元素。我只需要 class = "a b" 和 not class = "b a" 的那些元素。我在使用 javascript 的 getElementsByClassName 时遇到了同样的问题。

注意:我必须指定顺序的原因是我文档中的一些 div 有 class = "a b" 而有些有 "b a" 。 . .我只想 select 那些 "a b"。该文档的结构不够优雅,但这不在我的控制范围内。

如果这些元素没有其他 类,您可以 select 通过属性

$('[class="a b"]')

还有以 selector 开始和以 selector 结束的属性,以及包含 selector 的属性,即使它们确实有更多元素,它也会拾取元素类

$('[class*="a b"]')

注意:这也匹配 ...class="what a bad idea"

Plain JS 支持 selectors in querySelector[All]

属性

但这是个坏主意,类 的顺序无关紧要,如果是这样,那你就做错了。

理想情况下,属性列表不应让一个值优先于另一个值;换句话说,顺序应该是不重要的,所以你这里的模型可能有问题。

但是,要回答您的问题,您将需要正则表达式之类的东西。

$('*').filter(function() { return /\ba\b.*\bb\b/.test(this.className); });

[编辑]

如果 a 和 b 之间有其他 类 的机会,这就更宽容了。但是,正如 Adaneo 的回答所示,如果您确定永远只有这两个,您可以只使用属性选择器,正如他所演示的那样。

如果还涉及其他 类,您可以使用 filter()

$(".a.b").filter(function(){
   return this.className.indexOf('a b')>-1;
})

在这里你可以看到一个 JSFiddle:https://jsfiddle.net/d002g7n8/1/

$('.a.b')

    .filter(function(){

        return this.classList[0] == 'a' && this.classList[1] == 'b';

    })
    .addClass('selection');

我们先select个元素,然后过滤掉第一个class 'a',第二个class 'b'的元素。

Selector $(".a + .b") 用于 class b 中的第二个元素 DOM:

<element class="a">
<element class="b">

或者这个:

<element class="a b">
<element class="a b">

关于选择器 +http://www.w3schools.com/cssreF/sel_element_pluss.asp

对于您的问题,您可以将此选择器与过滤器一起使用:

$('.a.b').filter(function () {
    return $(this).attr('class') == 'a b';
})