jQuery选择器忽略指定元素答案

【问题标题】：jQuery selector to ignore specified elementjQuery选择器忽略指定元素
【发布时间】：2014-01-03 16:26:46
【问题描述】：

考虑这个 DOM：

<div id="div1">
  <div class="no-select-inside">
    <p>Don't select me</p>
  </div>
  <div>
    <p>Select me</p>
    <div><p>Select me too</p></div>
  </div>
  <div>
    <p>Select me</p>
    <div><p>Select me too</p></div>
  </div>
  <footer class="no-select-inside">
    <p>Don't select me</p>
    <div><p>Not me</p></div>
  </footer>
  <section>
    <p>Select me</p>
    <div><p>Select me too</p></div>
  </section>
</div>

我想要一个 fast 和 reliable jquery（或裸 DOM）选择器来选择那些不在 'no-select-inside' 类中的 p 标签

一切都是动态的，但我可以为不可选择的 DOM 元素分配一个属性。

编辑

真正的测试用例不是类选择器（可能是复杂的属性选择器，...）

一切都是动态的，可能嵌套太深（100 到 DOM 树在 no-select-inside 下有 p 有一个 no-select-inside 父级，即使选择了这些元素也有所有答案）

我已经缓存了所有 no-select-inside（Backbone 的 $el 并且可以缓存在数组中以提高性能），但真正的问题是快速选择这些元素（chrome 中的 20 毫秒太慢了！）。

【问题讨论】：

标签： javascript jquery dom jquery-selectors

【解决方案1】：

You can use .not as the working example is here 

$(document).ready(function(){
     var abc = $('#div1').find("p").not('.no-select-inside p');
     $(abc).each(function(e){
        alert($(this).html());
     }); 
 });

http://jsfiddle.net/8F7Kc/14/

【讨论】：

【解决方案2】：

试试这个：

$('div:not(.no-select-inside) p')

【讨论】：

【解决方案3】：

通用的解决方案是 filter 淘汰那些具有 .no-select-inside 祖先的人，例如：

$("p")
    .filter(function() { return !$(this).closest(".no-select-inside").length;})
    // and now do what needs to be done

这应该是相当有效的，因为它只遍历整个文档一次。

【讨论】：

很好，但它是否足够快，可以用于大量元素和深层嵌套元素？
@KiTO：只有您可以通过测量适当大小的数据集来决定。如果您可以对文档结构做出任何假设，那么将它们烘焙到选择中也可能会加快速度，尽管这取决于具体情况。
我之前选择了所有no-select-inside（并被缓存）。
This fiddle 显示一个简单的非选择器更快！（20 毫秒不算多，但在 100 多个选择中它很慢！），缓存时间减少到 6 毫秒（即使这样也慢到让人感觉不到）
@KiTO：如果 6ms 很慢，那么也许您应该重新考虑为什么需要这样做。也许有更好的解决方案。

【解决方案4】：

尝试使用.not() 或:not() 来过滤掉no-select-inside 中的p 元素

$('#div1 p').not('.no-select-inside p')
$('#div1 p:not(.no-select-inside p)')

【讨论】：

它比第一个答案快但它很慢！（见this fiddle）。