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

Posted 2023-03-05

【中文标题】jQuery 使用 AND 和 OR 运算符按属性选择

【英文标题】：jQuery select by attribute using AND and OR operators

【发布时间】：2012-05-28 01:32:56

【问题描述】：

我正在考虑，是否可以在 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"]');

不写特殊的过滤函数可以吗？

【问题讨论】：

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

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

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

这是一个好问题的糟糕例子。那么输入等不同的元素类型呢？

【参考方案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"]');

【讨论】：

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

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

【参考方案2】：

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

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

一般来说，链接选择器，如a.foo.bar[attr=value] 是某种 AND 选择器。

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

【讨论】：

你知道吗，如果这比 gabe 的答案更快？

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

【参考方案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

【参考方案4】：

选择器中的and操作符只是一个空字符串，or操作符是逗号。

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

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

【讨论】：

你需要那些报价吗？我的意思是为了一致性..可能只是我。 >.

@Vega：像blue 这样的简单字符串不需要引号，但我不确定数值，所以我保留了它们。

【参考方案5】：

先找出所有情况下出现的条件，然后过滤特殊条件：

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

【参考方案6】：

在你的特殊情况下是

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

【参考方案7】：

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

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

编辑：

抱歉，您想要蓝色和 1 或 3。怎么样：

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

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

【讨论】：

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

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

【参考方案8】：

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

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

或者，可以在单个选择器中使用简写来完成，其中干扰选择器一起充当AND，用逗号分隔充当OR：

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