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

Question

我需要使用jquery的"find"选择器来获取所有具有"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".

Answer 1

有几种可能性来解决这个问题.

一个相当快的一个是:

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

由于它的限制只是每个都遍历一个级别进入DOM树.我不完全确定,但这应该比find()使用复杂的选择器更快(但在每种情况下都更简单).