什么 JQuery 选择器会排除与给定选择器匹配的父项的项目？答案

【问题标题】：What JQuery selector excludes items with a parent that matches a given selector?什么 JQuery 选择器会排除与给定选择器匹配的父项的项目？
【发布时间】：2010-11-01 05:41:09
【问题描述】：

我有

var $set = $('.foo,.bar').filter(
    function() {return $(this).parents('.baz').length < 1;});

作为选择类为foo 或bar 的所有元素的一种方式，这些元素不是类为baz 的元素的后代。是否有一个选择器可以在不需要过滤 lambda 的情况下完成相同的事情？

<div class='foo'/><!--match this-->
<div class='bar'/><!--match this-->
<div class='baz'>
    <div class='foo'/> <!--don't match this-->
</div>

【问题讨论】：

您可以使用closest 方法而不是parents 使其更快。 closest 一旦找到匹配元素就停止查找，而 parents 沿着 DOM 树向上移动到文档的根元素以查找匹配元素。

标签： jquery jquery-selectors css-selectors

【解决方案1】：

事情的真相是，jQuery 根本没有一种特别优雅的方式来做你想做的事。虽然混乱的答案确实有效，但您必须想知道复杂的选择器（与复杂网页中的选择器一样慢）是否值得您拥有更详细但更快的过滤器功能。这没什么大不了的，我个人只是厌倦了特别长、复杂的选择器，但我可以避免它。

另一种选择是创建自己的选择器，因为 jQuery 很棒：

jQuery.expr[':'].parents = function(a,i,m){
    return jQuery(a).parents(m[3]).length < 1;
};

$('.foo,.bar').filter(':parents(.baz)');

expr 映射是 Sizzle 选择器引擎的一部分，可在此处找到文档：Sizzle Custom Pseudo-Selectors

【讨论】：

接受，因为它比混乱更完整' - 我在哪里可以找到 expr 数组的 API 文档？
据我所知，真的没有。
这很整洁，尽管我想我可能会将表达式名称更改为 noparents，因为这样可以更好地描述它正在做的事情。
该 JSBin 的链接与答案不匹配。时间久了，应该是回收了网址吧。
我在这个答案上添加了对expr 文档的引用。

【解决方案2】：

$('.foo:not(.baz .foo),.bar:not(.baz .bar)')

【讨论】：

【解决方案3】：

我无法让它工作：

$(".children:not(#parent .children)");

但我可以让它工作：

$(".children").not($("#parent .children"));

注意：不确定这是否与我使用 1.2.6 的 jQuery 版本有关

【讨论】：

使用$().not() 是最简单的解决方案。并且很好 documented 做被要求做的事情。

【解决方案4】：

试试这个：

$('div').filter(function () {
  return ($(this).parent().not('.baz'));
})

【讨论】：

【解决方案5】：

chaos 提供的选择器应该可以工作：

$('.foo:not(.baz .foo),.bar:not(.baz .bar)')

只是想给你一个关于 FireBug 扩展名为 FireFinder 的提示，你可以用它来测试你的 css/jquery 选择器。

来自网站：Firefinder 是 Firebug（在 Firefox 中）的扩展，提供了快速查找与所选 CSS 选择器或 XPath 表达式匹配的 HTML 元素的功能。它允许您在查看内容的同时立即在页面中测试您的 CSS 选择器，匹配的元素将被突出显示。

【讨论】：

【解决方案6】：

var $li = jQuery('li', this).not('.dropdown-menu > li');

我正在使用 Roots 主题，他们将下拉菜单从“子菜单”更改为“.dropdown-menu”

【讨论】：

【解决方案7】：

将 :not('.baz') 添加到您的顶级选择器。

【讨论】：