我如何 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';
})
我想 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';
})