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

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

Example:

<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"]');

but it does not work, same here:

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

不编写特殊的过滤器函数是否可行?

197544 次浏览

写一个如下的过滤器怎么样,

$('[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');
});

演示

AND 操作

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

OR 操作,使用逗号

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

As @Vega commented:

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

JQuery 使用 CSS 选择器来选择元素,所以您只需要使用多个规则,用逗号分隔它们,如下所示:

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

编辑:

对不起,你想要蓝色和1或3。怎么样:

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

将两个属性选择器放在一起得到 AND,使用逗号得到 OR。

要使用您所说的逻辑操作正确地选择元素,您只需要 jQuery.filter()用于 AND操作,而不是“特殊的过滤器函数”。您还需要 jQuery.add()来执行 OR操作。

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

Alternatively, it is possible to accomplish using shorthand in a single selector, where jamming selectors together acts as an AND and separating with a comma acts as an OR:

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

选择器中的和运算符只是一个空字符串,或运算符是逗号。

然而,没有分组或优先级,所以你必须重复一个条件:

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

在你的特殊情况下,它会是

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

简单使用 .filter() [docs](AND)使用 多重选择器 < sup > [ docs ] (OR) :

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

一般来说,像 a.foo.bar[attr=value]这样的链式选择器是某种 AND 选择器。

JQuery 有关于支持的选择器的 大量的文件,值得一读。

首先找出所有情况下出现的条件,然后过滤特殊条件:

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