我如何使用jQuery find（）方法与深度的限制？(How can I use jQuery f

我需要使用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”分区。 从它开始，我需要获得所有“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”。

Answer 1:

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

一个相当快速的一个是：

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

由于它是唯一穿越到每个DOM树一个级别的限制。 我不能完全肯定，但本应更快（但在任何情况下简单）比find()有一个复杂的选择。

Answer 2:

对于比你当前的例子更配合物过滤，您应该使用的过滤器。 在这里，这个做的伎俩：

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

Answer 3:

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

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

如果没有，你能做到这一点（虽然它的效率较低）：

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

文章来源: How can I use jQuery find() with a depth limit?