排除 DOM 子树的 jQuery 选择器答案

【问题标题】：jQuery selector that excludes a subtree of the DOM排除 DOM 子树的 jQuery 选择器
【发布时间】：2014-03-13 07:01:56
【问题描述】：

是否有一个 jQuery 选择器可以抓取 A 类中所有不是 B 类后代的元素？

例子：

<body>
   <div class=report-value id=overview></div>
   <div class=panels>
      <div class=report-value id=sales></div>
      <div class=report-value id=training></div>
      <div class=report-value id=hr></div>
   </div>
   <div class=report-value id=summary></div>
</body>

对于上面的示例，需要选择不是.panels 元素后代的所有.report-value 元素。报表值计算量大，只有在实际显示时才需要计算。

类似：

var elems = $('.report-value:excludeTree(.panels)');

这将返回一个仅包含 #overview 和 #summary 的 jQuery 对象。

性能对于这个 Web 应用程序很重要。

【问题讨论】：

这是最终的性能测试：jsfiddle.net/AyJmL/3

标签： javascript jquery jquery-selectors

【解决方案1】：

你可以使用.not()过滤掉那些元素

$('.report-value').not('.panels .report-value')

演示：Fiddle

【讨论】：

现在有一个性能测试，你的答案（Solution #2）是迄今为止最快的。几天后，我会接受最快（最干净）的答案。 JSFiddle：jsfiddle.net/AyJmL
仅供参考 - $('.report-value:not(.panels .report-value)') 也是可能的，但显然要慢得多（jsfiddle.net/AyJmL/4 中的#4）。认为这可能会让任何试图在这里优化语法的人感兴趣。

【解决方案2】：

试试，

var elems = $('.report-value').filter(function(){ 
                 return $(this).closest('.panels').length ==0; 
            });

DEMO

【讨论】：

【解决方案3】：

var allpanels=$('body>.report-value');

【讨论】：

这个选择器似乎不适合我。您可以检查我是否正确实施：jsfiddle.net/AyJmL（参见解决方案#3）
对不起！类名已更改。立即查看

【解决方案4】：

$('body > .report-value')

或

$('.report-value').each(function(){
if(!$(this).parent().hasClass('.panels'))
{
//use query
}
});

【讨论】：

这些现在在更新的测试页面上（Solution #4 和 Solution #5），但它们都失败了。见：jsfiddle.net/AyJmL/3
试试这个：$('.report-value').each(function(){ if(!$(this).parent().hasClass('panels') && !$(this ).parents().eq(1).hasClass('panels')) { console.log($(this)); } });

【解决方案5】：

试试这个：

$('.report-value').each(function(){
if(!$(this).parent().hasClass('panels') && !$(this).parents().eq(1).hasClass('panels'))
{
console.log($(this));
}
});

它只控制你需要的 div

【讨论】：