使用jQuery递归查找子元素，但忽略某些元素。

Question

假设有以下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>

我想选择主元素的所有子div标签，但是要忽略类名为“no”的div的子元素。

我目前编写了一个递归函数来完成这项工作。但是我想知道是否有jQuery选择器可以实现我想要的结果。

我想获取带有id为a、b、c、d、d1、e和e1的DIV。

谢谢。

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

- Arun

---

那么，你是指主要的子代div还是主要的祖先div？ - user456814

Answer 1

应该是这样的：

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

顺便说一下，“子元素”这个术语只适用于一个元素的“直接”后代。你想获取#main的所有后代（不仅限于子元素）。

参考文献：.not()

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

- Felix Kling

---

是的，Felix，所有后代，而不仅仅是直接子元素。请看这里http://jsfiddle.net/mRENV/。 - Arun

@Arun：请看我的更新。你的演示不正常，因为你正在改变元素的内容，这会删除它们的子元素。 - Felix Kling

谢谢Felix，它起作用了。但是我想知道，我写一个递归循环并忽略类“.no”的元素，比要求jQuery搜索所有子元素，然后删除不需要的元素更有效吗？ - Arun

@Arun：我不知道。可能吧。你可以在http://jsperf.com/上对你的代码进行基准测试。创建两个测试用例，看看哪一个更快。你还应该添加在`#main`之外的`div`。 - Felix Kling

Answer 2

有几种使用jQuery实现此功能的语法方法，我的建议是:

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

使用:not()^help选择器，连同.find()^help方法调用。这行代码等同于：

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

尽管后者可能会稍微快一些。

- jAndy

---

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

Answer 3

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

- Useless Code

---

谢谢。您的解决方案是最快的 - http://jsperf.com/finding-children-bug-ignoring-certain-children - Arun

@Arun: 只是为了解释结果：第一个更快是因为有两个原因：（a）你使用了子选择器>。如果没有它，差异就较小（见此处）。（b）在现代浏览器中，jQuery可以利用querySelectorAll并直接传递有效的CSS选择器。在旧版浏览器中可能看不到任何区别。 - Felix Kling