jQuery 是不是有类似 :any 或 :matches 伪类的东西？

Posted 2023-03-06

【中文标题】jQuery 是不是有类似 :any 或 :matches 伪类的东西？

【英文标题】：Does jQuery have something like the :any or :matches pseudo-class?jQuery 是否有类似 :any 或 :matches 伪类的东西？

【发布时间】：2014-02-15 20:11:48

【问题描述】：

我想简化我的选择器：

'#a #b a[href^=mailto], .c .d a[href^=mailto]'

收件人：

':matches(#a #b, .c .d) a[href^=mailto]'

这可能只使用 jQuery 选择器吗？还是我必须这样做：

$('#a #b, .c .d').find('a[href^=mailto]')

这不是那么灵活。

【问题讨论】：

.find() 有什么问题？

如果 CSS 规范中没有伪类，为什么你认为它们应该在 jQuery 中？为什么不看一下 jQuery 文档？ api.jquery.com/category/selectors

.find 不允许使用其他选择器（您可以使用children 直接子代或find 的后代）。并且 jQuery 中有一整类选择器不在 css 中：api.jquery.com/category/selectors/jquery-selector-extensions

@theazureshadow，很抱歉发表了严厉的评论。我的意思是：如果遇到类似的问题，那么深入研究搜索、CSS 规范和 jQuery 文档——1) 选择器存在于 jQuery 但 CSS (Extensions is good); 2) CSS 中存在选择器，但 jQuery （在错误跟踪器中打开票证的充分理由）； 3)两个都不存在selector（可惜，求改进）。

似乎答案是它不存在。在等待选择器级别 4 时，我可以很冗长。dev.w3.org/csswg/selectors4/#matches

【参考方案1】：

jQuery 不提供与:any()/:matches() 等效的选择器（其中:any() 是原始形式，it was first implemented internally in Gecko and WebKit）。如果您不能或不愿意扩展您的选择器，您确实必须分解您的选择器字符串并进行单独的方法调用。

您使用哪种方法取决于:matches() 将出现在您的选择器中的确切位置：

如果:matches() 单独出现在选择器字符串的开头，在任何组合符之前，如问题中所示：

':matches(#a #b, .c .d) a[href^=mailto]'

在出现:matches() 的地方替换$()，并将选择器的其余部分传递给.find()、.children()、.next() 或.nextAll()，具体取决于:matches() 后面的组合子（后代、子、 + 或 ~）。

转载自问题：

$('#a #b, .c .d').find('a[href^=mailto]')

如果:matches()单独出现在组合符之后，例如：

'#a #b > :matches(.c, .d)'

在:matches()出现的地方替换上述方法之一：

$('#a #b').children('.c, .d')

如果:matches() 出现在另一个复合选择器中，例如：

':matches(#a #b, .c .d) a[href^=mailto]:matches(.e, .f)'

在出现:matches() 的地方替换.filter()：

$('#a #b, .c .d').find('a[href^=mailto]').filter('.e, .f')

【参考方案2】：

如果你正在寻找所有a[href^=mailto]，那么

$('a[href^=mailto]')....

与

$('* a[href^=mailto]')....

或者如果他们有一个“通用”选择器/父级

$('selector * a[href^=mailto]')....

否则：

$('#a #b, .c .d').find('a[href^=mailto]') 正如您在问题中所写的那样

【参考方案3】：

它们有 .has()，它将匹配元素的集合减少为具有与选择器或 DOM 元素匹配的后代的元素。

所以这将返回 父对象，这些对象的锚点带有以 mailto 开头的 href：

$('#a #b, .c .d').has('a[href^=mailto]');

---

但就选择锚点本身而言，您的最后一个选项 find() 是最好的。它本质上就是在任何其他方法的幕后调用。

$('#a #b, .c .d').find('a[href^=mailto]');

【讨论】：

我认为他是想联系a[href^=mailto]，而不是他们的父母。

@JeromyFrench - 是的，我读得太快了。我已经更新澄清。

【参考方案4】：

目前在 jQuery 中没有你提到的选择器。

看起来你的最后一个选择器已经是最简化的方式了，如果有什么可以做的不仅仅是缩短：

$('#b, .c .d').find('a[href^=mailto]')

如果您需要 #b 作为 #a 的后代，则无法缩短您的选择器 IMO

【讨论】：

如果他只想要#b（如果它是#a 的后代）怎么办？

我是说$('#a #b')（给我一个id为b的#a的后代）与('#b')不同（给我 #b)。

“没有选择器”是我想要的。但是您答案的第二部分似乎没有用。如果你删除它，我会接受这个答案。