jQuery „find()” z ograniczeniem głębokości, nie mogę używać .children()

Question

muszę używać „znaleźć” selektor jQuery, aby uzyskać wszystkie div posiadające klasę „field_container”. Problem polega na tym, że nie mogę zagłębiać się w drzewo DOM.

Oto moja uproszczona struktura 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//--> 

Mam Początkowe odniesienie do "tab_0" div. Zaczynając od tego, muszę uzyskać wszystkie elementy div "field_container", z wyłączeniem child "field_containers".

Próbowałem to:

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

nie mogę zmienić mój początkowy odniesienia, to musi być "tab_0".

Answer 1

Istnieje kilka możliwości rozwiązania tego problemu.

Dość szybko z nich jest:

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

ze względu na jego ograniczenie jedynie przejeżdżające jeden poziom do drzewa DOM każdego. Nie jestem do końca pewien, ale powinno to być szybsze (ale w każdym przypadku prostsze) niż find() ze złożonym selektorem.

Answer 2

Czy zagnieżdżanie spójne? Jeśli tak, można to zrobić:

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

Jeśli nie można tego zrobić (choć jest to mniej wydajne):

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

Answer 3

Więcej niż filtrowanie complexe bieżącym przykładzie, należy użyć filtru. Tutaj to się podoba:

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