jquery - CSS/JQuery 选择器：有没有在类中选择类？

Question

假设我们有以下标记：

<div class="t-shirt black blue">Example</div>
<div class="t-shirt white blue">Example</div>
<div class="sweater black blue">Example</div>
<div class="sweater black red">Example</div>
<div class="sweater white red">Example</div>
<div class="hat black blue">Example</div>
<div class="hat black red">Example</div>
<div class="hat white red">Example</div>

有没有用一个选择器选择黑色和蓝色的t-shirtOR ？sweater我的意思是，不使用逗号分隔的选择器。

例如，我不想执行以下操作：

var wanted = $('.t-shirt.black.blue, .sweater.black.blue');

反正有没有做类似以下的事情？（我知道它不起作用）：

var wanted = $('(.t-shirt, .sweater).black.blue');

提前致谢。

Answer 1

不，没有。在 jQuery 和 CSS 中都没有。

即使有用于分组选择器部分的功能性伪类（例如:matches()Selectors 4 中即将推出的），您仍然需要提供这些类的逗号分隔列表：

:matches(.t-shirt, .sweater).black.blue

不用说，上面的选择器在任何浏览器中都不起作用（还）。如果你真的想的话，你可以 自己实现它作为一个 Sizzle 扩展，但老实说我不会打扰。

Answer 2

你可以这样做：

var wanted = $('.black.blue').filter('.t-shirt, .sweater');

但

var wanted = $('.t-shirt.black.blue, .sweater.black.blue');

无论如何可能更有效（虽然我没有测试过）

Answer 3

如果唯一的目标不是使用逗号，您可以这样做：

var blackblue = $(".black.blue"),
    tshirts = blackblue.filter(".t-shirt"),
    sweaters = blackblue.filter(".sweater"),
    both = tshirts.add(sweaters);

但是我看不出它有什么更好的地方，除非它能让你更好地组织起来。

Answer 4

var selectionLevel1 = $(".t-shirt, .sweater").andSelf();
var finalSelection = $(".black", selectionLevel1);