什么JQuery选择器排除具有与给定选择器匹配的父项的项?

时间:2009-06-08 16:39:51

标签: jquery jquery-selectors css-selectors

我有

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

选择所有类别为foobar且不从类baz的元素下降的元素的方法。是否有一个选择器可以完成同样的事情,而不需要过滤lambda?

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

7 个答案:

答案 0 :(得分:77)

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

答案 1 :(得分:29)

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

答案 2 :(得分:17)

我无法解决这个问题:

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

但我可以让这个工作:

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

注意:不确定这是否与我使用1.2.6

的jQuery版本有关

答案 3 :(得分:4)

试试这个:

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

答案 4 :(得分:1)

选择器混乱给出应该有效:

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

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

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

答案 5 :(得分:1)

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

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

答案 6 :(得分:0)

在您的顶级选择器中添加:not('。baz')。