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-shirt或sweater搭配一个选择器？ 我的意思是，不使用逗号分隔的选择器。

例如，我不想做以下事情：

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

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

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

提前致谢。

Answer 1

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

即使存在用于对选择器的部分进行分组的功能伪类（例如，选择器4中即将发生的:matches() ），您仍然需要提供这些类的逗号分隔列表：

: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);