如何使用具有深度限制的 jQuery find()？答案

【问题标题】：How can I use jQuery find() with a depth limit?如何使用具有深度限制的 jQuery find()？
【发布时间】：2013-03-30 14:09:57
【问题描述】：

我需要使用 jquery 的“查找”选择器来获取所有具有“field_container”类的 div。问题是我不能深入 DOM 树。

这是我简化的 HTML 结构：

<div id='tab_0'>

 <div id='form_content'>

  <div class='field_container'>
   <span>Div 1</span>
   <div class='field_container'>
   <span>Div 1.1</span>
   </div>
  </div>

  <div class='field_container'>
   <span>Div 2</span>
  </div>

  <div class='field_container'>
   <span>Div 3</span>
  </div>

 </div> <!-- Closing form_content div//-->

</div> <!-- Closing tab_0 div//-->

我有一个对“tab_0”div 的初始引用。从它开始，我需要获取所有“field_container” div，不包括子“field_containers”。

我试过这个：

$('#tab_0').children('.field_container') -> doesnt work, because the "field_container" divs arent direct children.

$('#tab_0').find('.field_container') -> doesnt work, because "Div 1.1" is also returned. I only need the first-level ones (Div1, Div2, Div3).

我无法更改我的初始引用，它必须是“tab_0”。

【问题讨论】：

旁注：html 评论标签看起来像这样： 你可以通过错误的标记突出显示你的错误；）

标签： jquery find depth

【解决方案1】：

嵌套是否一致？如果是这样，您可以这样做：

$('#tab_0').find('#form_content > .field_container');

如果没有，您可以这样做（尽管效率较低）：

$('#tab_0').find('.field_container:not(.field_container .field_container)');

【讨论】：

.form_content 应该是#form_content
感谢 Jmar 的暗示，我想首先在包装器中找到所有带有类的 div ..

【解决方案2】：

对于比当前示例更复杂的过滤，您应该使用过滤器。在这里，这可以解决问题：

$('#tab_0').find('.field_container').filter(function(){return $(this).parent()[0].id === "form_content"}).each(function(){...});

【讨论】：

【解决方案3】：

有几种可能解决这个问题。

一个相当快的方法是：

$('#tab_0').children('#form_content').children('.field_container')

由于它的限制是每层只能遍历一层进入 DOM 树。我不完全确定，但这应该比带有复杂选择器的find() 更快（但在每种情况下都更简单）。

【讨论】：