72

我有

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

作为一种方法来选择类为fooorbar且不从类为 的元素下降的所有元素baz。是否有一个选择器可以在不需要过滤 lambda 的情况下完成同样的事情?

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

7 回答 7

80

事情的真相是,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

于 2009-06-08T17:13:25.907 回答
31
$('.foo:not(.baz .foo),.bar:not(.baz .bar)')
于 2009-06-08T16:44:14.647 回答
18

我无法让它工作:

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

但我可以让它工作:

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

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

于 2009-09-28T05:12:53.980 回答
4

试试这个:

$('div').filter(function () {
  return ($(this).parent().not('.baz'));
})
于 2013-04-02T20:47:08.193 回答
1

选择器混乱给出的应该工作:

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

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

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

于 2009-06-08T16:59:49.793 回答
1

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

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

于 2012-08-24T20:19:03.223 回答
0

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

于 2009-06-08T16:44:23.540 回答