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

毋庸置疑，上述选择器在任何浏览器中都不起作用。如果你真的想，你可以 implement it yourself as a Sizzle extension，但老实说我不会打扰。

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

CSS / JQuery选择器：无论如何都要在类中选择类？

4 个答案: