jQuery使用AND和OR运算符选择属性

Question

我正在考虑，如果在jQuery中可以使用AND和OR通过命名属性选择元素。

示例：

<div myid="1" myc="blue">1</div>
<div myid="2" myc="blue">2</div>
<div myid="3" myc="blue">3</div>
<div myid="4">4</div>

我想选择myc="blue"的所有元素，但只选择myid设置为1或3的元素。

所以我试过了：

a=$('[myc="blue"] [myid="1"]  [myid="3"]');

但它不起作用，同样在这里：

a=$('[myc="blue"] && [myid="1"] || [myid="3"]');

是否可以不编写特殊的过滤功能？

Answer 1

AND 操作

a=$('[myc="blue"][myid="1"][myid="3"]');

OR 操作，请使用逗号

a=$('[myc="blue"],[myid="1"],[myid="3"]');

正如@Vega所评论的那样：

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');

Answer 2

使用.filter() ^[docs]（OR）简单地使用multiple selector ^[docs]（AND）：

$('[myc="blue"]').filter('[myid="1"],[myid="2"]');

通常，链接选择器（如a.foo.bar[attr=value]）是某种AND选择器。

jQuery有extensive documentation关于受支持的选择器，值得一读。

Answer 3

如何编写如下所示的过滤器

$('[myc="blue"]').filter(function () {
   return (this.id == '1' || this.id == '3');
});

编辑： @Jack谢谢..完全错过了..

$('[myc="blue"]').filter(function() {
   var myId = $(this).attr('myid');   
   return (myId == '1' || myId == '3');
});

DEMO

Answer 4

选择器中的and运算符只是一个空字符串，而运算符是逗号。

但是没有分组或优先级，因此您必须重复其中一个条件：

a=$('[myc=blue][myid="1"],[myc=blue][myid="3"]');

Answer 5

首先找到在所有情况下发生的情况，然后过滤特殊条件：

$('[myc="blue"]')
    .filter('[myid="1"],[myid="3"]');

Answer 6

在你的特殊情况下，它将是

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');

Answer 7

JQuery使用CSS选择器来选择元素，所以你只需要用逗号分隔它们就可以使用多个规则，如下所示：

a=$('[myc="blue"], [myid="1"], [myid="3"]');

编辑：

对不起，你想要蓝色和1或3.怎么样：

a=$('[myc="blue"][myid="1"],  [myid="3"]');

将两个属性选择器放在一起会给你AND，使用逗号给你OR。

Answer 8

要使用您所述的逻辑操作正确选择元素，您只需要jQuery.filter() AND操作，而不需要“特殊过滤功能”。 jQuery.add()操作还需要OR。

var elements = $('[myc="blue"]').filter('[myid="1"').add('[myid="3"');

或者，可以在单个选择器中使用速记来实现，其中干扰选择器一起充当AND并且用逗号分隔充当OR：

var elements = $('[myc="blue"][myid="1"], [myid="3"]');