JQuery的“find（）”有深度限制，我不能使用.children（） [英] JQuery's "find()" with depth limit, I can't use .children()

问题描述

我需要使用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> <！ - 关闭form_content div //  - > 
 
< / div> <！ - 关闭tab_0 div //  - > 
  

我有一个tab_0div的初始引用。从此开始，我需要获得所有field_containerdiv，不包括子字段field_containers。

我试过这个：

  $（'＃tab_0'）。children（'。field_container'） - >不工作，因为field_containerdivs不是直接的孩子。 
 
 $（'＃tab_0'）。find（'。field_container'） - >不工作，因为Div 1.1也被返回。我只需要一级（Div1，Div2，Div3）。 
  

我不能更改我的初始引用，它必须是tab_0。

解决方案

一个相当快的方法是：

$ $ $ $''$ $ $''$'$'$。$'$' b

，因为它仅限于每个DOM树中的一个级别。我不完全确定，但这应该比复杂的选择器更快（但在任何情况下都比较简单）比 find（）。

I need to use jquery's "find" selector to get all divs having the class "field_container". The problem is that I can't go too deep in the DOM tree.

Here is my simplified HTML structure:

<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//-->

I have a initial reference to the "tab_0" div. Starting from it, I need to obtain all "field_container" divs, excluding child "field_containers".

I have tried this:

$('#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).

I can't change my initial reference, it has to be "tab_0".

解决方案

There are several possibilities to solve this.

A rather quick one is:

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

due to it's restriction of only traversing one level into the DOM tree each. I'm not entirely sure but this should be quicker (but in every case simpler) than a find() with a complex selector.

这篇关于JQuery的“find（）”有深度限制，我不能使用.children（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！