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

104

我正在考虑，如果在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"]');

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

— 邦德尔
source

7

注意：您不应该像myc和那样组成自己的属性myid。如果您使用的是HTML5，请在它们前面加上data-：data-myc和data-myid。

— RoToRa 2012年

@ RoToRa，HTML5中有文档说明您应该这样做吗？我看到的大多数网站都使用了开发人员当时的想法...

— Alexis Wilke 2015年

1

仅仅因为人们这样做，并不意味着它是正确的。请参见HTML5第3.2.1节：“作者不得使用本规范或其他适用规范所不允许的元素，属性或属性值，因为这样做会使将来扩展该语言的难度大大增加。”

— RoToRa

1

这是一个好问题的不良例子。像输入这样的不同元素类型呢？

— 耶稣g_force哈里斯

192

AND运算

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

或运算，请使用逗号

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

正如@Vega所说：

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

— 加布
source

1

我认为，他想要的是myc == blue && (id == 1 || id == 3)

— Selvakumar Arumugam

2

如果我使用a=$('[myc="blue"] [myid="1"],[myid="3"]');它是意味着([myc="blue"] AND [myid="1"]) OR [myid="3"]还是([myc="blue"]) AND ([myid="1"] OR [myid="3"]) 我正在寻找第二个//编辑：谢谢您的更新！:-)

— Bndr

18

使用多重选择器^[docs]（OR）的简单用法.filter() ^[docs]（AND ）：

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

通常，链接选择器就像a.foo.bar[attr=value]某种AND选择器一样。

jQuery拥有有关受支持的选择器的大量文档，值得一读。

— 费利克斯·克林
source

您知道吗，这比gabe的答案还快吗？

— Bndr

我不知道，也许，也许不是。

— 菲利克斯·克林

10

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

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

编辑： @杰克谢谢..完全错过了..

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

演示

— Selvakumar Arumugam
source

5

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

但是，没有分组或优先级，因此您必须重复以下条件之一：

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

— 古法
source

您需要那些报价吗？我的意思是为了保持一致。>。<

— Selvakumar Arumugam

1

@Vega：您不需要引号，例如blue，但是我不确定数字值，所以我保留了它们。

— Guffa

5

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

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

— 插口
source

1

在您的特殊情况下，

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

— 保罗
source

0

JQuery使用CSS选择器来选择元素，因此您只需使用多个规则即可，用逗号分隔它们，如下所示：

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

编辑：

抱歉，您想要蓝色和1或3。如何：

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

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

— 菲纳什
source

1

我认为，他想要的是myc == blue && (id == 1 || id == 3)

— Selvakumar Arumugam

您需要[myc="blue"]在第二个示例中重复选择器。

— RoToRa 2012年

-1

要使用已说明的逻辑运算正确选择元素，只需要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"]');

— 视力
source