jQuery或选择器?


325

我想知道是否有一种方法可以在jQuery选择器中使用“或”逻辑。例如,我知道一个元素是class A或classB的元素的后代,并且我想做类似的事情elem.parents('.classA or .classB')。jQuery是否提供此类功能?

Answers:


494

使用逗号。

'.classA, .classB'

您可以选择省略空格。


43
应该注意的是,这并不是一个“或”选择器,更像是一个中的多个选择器。
Alex

49
@alex:但不会两次选择相同的元素(串联运算符会选择两次)。它实际上是一个OR选择器,因为它创建了两个或更多集合的UNION(而AND是一个交集)。
cletus

谢谢,那行得通。由于调试方面的疏忽,我认为使用逗号表示“与”。
Suan 2010年

38
AND会是.classA.classB
丹尼尔·A·怀特

2
它实际上取决于原始问题所隐含的含义……即:传统上,“或”运算符会短路。因此,用jquery来说,“或”运算符也可能会短路。
Mathew

71

如果您有多个需要联接的jQuery对象,使用逗号可能还不够。

。新增()方法将所选择的元素到结果集:

// classA OR classB
jQuery('.classA').add('.classB');

它比更加冗长'.classA, .classB',但是可以让您构建更复杂的选择器,如下所示:

// (classA which has <p> descendant) OR (<div> ancestors of classB)
jQuery('.classA').has('p').add(jQuery('.classB').parents('div'));

22

我为此功能编写了一个非常简单的(5行代码)插件:

http://byrichardpowell.github.com/jquery-or/

它使您可以有效地说出“获取此元素,或者如果该元素不存在,请使用此元素”。例如:

$( '#doesntExist' ).or( '#exists' );

尽管接受的答案提供了与此类似的功能,但是如果两个选择器(逗号前后)都存在,则将返回两个选择器。

希望对所有可能通过Google进入此页面的人有帮助。


4
这不是布尔值OR运算符的工作方式。如果两个选择器都返回元素,则OR运算符应返回所有元素,而不仅是第一个选择器的元素。您的插件应命名为“ ifEmpty”或“ else”或类似名称。
阿尔卑斯

13
@Alp:考虑在普通JS 中"a" || "b"vs. 的行为null || "b"。如果我们在此处应用相同的行为,$(a).or(b)则应$(a)在存在的情况下返回,否则应返回$(b)。我认为此命名法没有任何问题,因为“或”与JS“ ||”的行为相匹配 (或)运算符。
FtDRbwLXw6

4
我也认为它是一个or。其他什么都在谈论更像是一个concatmerge动作。
莱昂佩尔蒂埃

1
就我个人而言,我不会称其为“或”,因为它可能导致混乱(即使从技术上讲它可能是正确的,因为它是一种特殊的if / or)。这实际上是空合并,它称为不同的事物,并且使用不同的语言具有不同的运算符:en.wikipedia.org/wiki/Null_coalescing_operator
JanErikGunnar

术语“异或”(专有或)是准确的术语,但是人们经常在寻找异或时寻找异或,因为异或通常是特定类型的“异”。
liljoshu

17

如果您要使用element = element1 ||的标准构造 element2,其中JavaScript将返回第一个是真实的,您可以这样做:

element = $('#someParentElement .somethingToBeFound') || $('#someParentElement .somethingElseToBeFound');

这将返回实际找到的第一个元素。但是更好的方法可能是以这种方式使用jQuery选择器逗号构造(它返回找到的元素的数组):

element = $('#someParentElement').find('.somethingToBeFound, .somethingElseToBeFound')[0];

这将返回第一个找到的元素。

我不时使用它在列表中找到一个活动元素,或者在没有活动元素的情况下查找一些默认元素。例如:

element = $('ul#someList').find('li.active, li:first')[0] 

这将返回具有活动类的任何li,或者如果没有,则将仅返回最后一个li。

两者都会起作用。但是,由于||可能会导致性能下降。一旦发现真相,它将立即停止处理,而数组方法将尝试查找所有元素,即使它已经找到了一个。然后再次使用|| 如果构造必须在找到要返回的选择器之前经过多个选择器,则可能会出现性能问题,因为它必须为每个选择器调用主jQuery对象(我真的不知道这是否对性能造成影响,似乎合乎逻辑)。但是,通常,当选择器是一个相当长的字符串时,我会使用数组方法。


我认为find('。somethingToBeFound,.somethingElseToBeFound')与||不同 构造。因为查找.somethingElseToBeFound是否在.somethingToBeFound之前的DOM中,所以即使.somethingToBeFound存在,也会返回它。
remo

0

终于,我找到了hack的方法:

div:not(:not(.classA,.classB)) > span

(选择具有类classAclassB具有直接子跨度的div)


-2

Daniel A. White Solution非常适合上课。

我遇到一种情况,我必须找到输入字段,例如donee_1_card,其中1是索引。

我的解决方案是

$("input[name^='donee']" && "input[name*='card']")

虽然我不确定它的优化程度。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.