jQuery递归查找孩子，但忽略某些元素答案

【问题标题】：jQuery finding children recursively, but ignore certain elementsjQuery递归查找孩子，但忽略某些元素
【发布时间】：2011-09-16 03:38:34
【问题描述】：

让我们假设以下 HTML

<div id=main>
   <div id=a></div>
   <div id=b></div>
   <div id=c></div>
   <div id=d>
      <div id=d1 class="no">
        <div id=d11></div>
        <div id=d12></div>
      </div>
   </div>
   <div id=e>
      <div id=e1 class="no">
        <div id=e11></div>
        <div id=e12></div>
        <div id=e13></div>
      </div>
   </div>
 </div>

我想选择所有属于 main 子级的 div 标签，但想忽略类为“no”的 div 的子级。

我目前已经编写了一个递归函数来完成这项工作。但想知道是否有一个 jQuery 选择器来获得我想要的。

我想要 id 为 a,b,c,d,d1,e,e1 的 DIV

谢谢

编辑：在这里创建了一个测试页 - http://jsfiddle.net/mRENV/

【问题讨论】：

那么，您的意思是 children 的主 div 还是祖先主的 div？

标签： javascript jquery html jquery-selectors

【解决方案1】：

应该是：

$('#main div').not('.no div')

顺便说一句。 children 一词仅指元素的直接后代。你想得到#main 的所有后代（不仅仅是孩子）。

参考：.not()

编辑：更新您的演示，使其正常工作：http://jsfiddle.net/fkling/mRENV/1/

【讨论】：

是的，菲利克斯，所有的后代，不仅仅是直系子女。请看这里jsfiddle.net/mRENV
@Arun：查看我的更新。您的演示无法正常工作，因为您正在更改元素的内容，从而删除了它们的子元素。
谢谢菲利克斯，它有效。但是想知道我是否编写一个递归循环并忽略带有 .no 类的元素是否比要求 jQuery 搜索所有子元素然后删除不需要的元素更有效？
@Arun：我不知道。大概。您可以在jsperf.com 对您的代码进行基准测试。创建两个测试用例，看看哪个更快。您还应该添加div 之外的#main。

【解决方案2】：

在没有进一步遍历的单个选择器中，您可以这样做： $('#main div:not(div.no > div)');

【讨论】：

谢谢。您的解决方案运行速度最快 - jsperf.com/finding-children-bug-ignoring-certain-children
@Arun：只是为了解释结果：第一个更快，因为两个原因：（a）您正在使用子选择器>。没有它，区别就小了 (see here) (b) 在现代浏览器中，jQuery 可以使用querySelectorAll 并直接传递一个有效的 CSS 选择器。在旧版浏览器中，您可能看不到任何区别。

【解决方案3】：

使用 jQuery 实现的几种语法方法，我的建议是：

var $result = $('#main').find('div:not(.no > div)');

调用.find()^help 以及伪:not()^help 选择器。这一行相当于：

var $result = $('#main').find('div').not('.no > div');

而后者可能会稍微快一些。

【讨论】：

我犯了同样的错误。这将忽略所有.no 元素，但实际上他想忽略.no 元素的所有后代。