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

Dan*_*ett 71 jquery css-selectors jquery-selectors

我有

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

作为一种选择所有其类或者是元素foobar和谁不从一个元素,它的类是下降baz.是否有一个选择器可以完成同样的事情,而不需要过滤lambda?

<div class='foo'/><!--match this-->
<div class='bar'/><!--match this-->
<div class='baz'>
    <div class='foo'/> <!--don't match this-->
</div>
Run Code Online (Sandbox Code Playgroud)

Pao*_*ino 79

问题的真相是,jQuery根本没有一种特别优雅的方式来做你想做的事情.虽然混乱的答案确实有效,但您必须想知道复杂的选择器(与选择器一样慢,可能在一个复杂的网页中)是否值得拥有更详细但更快的过滤功能.这并不是什么大不了的事情,当我能够避免时,我只是个人厌倦了特别长而复杂的选择者.

另一个选择是创建自己的选择器,因为jQuery很棒:

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

$('.foo,.bar').filter(':parents(.baz)');
Run Code Online (Sandbox Code Playgroud)

expr地图是Sizzle选择器引擎的一部分,文档可以在这里找到:Sizzle Custom Pseudo-Selectors

  • 虽然我认为我可能会将表达名称更改为noparents,但这很整洁,因为它描述了它正在做得更好一些. (10认同)

cha*_*aos 30

$('.foo:not(.baz .foo),.bar:not(.baz .bar)')
Run Code Online (Sandbox Code Playgroud)


goi*_*ing 18

我无法让这个工作:

$(".children:not(#parent .children)");
Run Code Online (Sandbox Code Playgroud)

但我可以让这个工作:

$(".children").not($("#parent .children"));
Run Code Online (Sandbox Code Playgroud)

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


Seb*_*eck 5

试试这个:

$('div').filter(function () {
  return ($(this).parent().not('.baz'));
})
Run Code Online (Sandbox Code Playgroud)