Выбор невложенных подузлов с JQuery

Question

У меня есть HTML-структура, которая содержит вложенные дивы с container класса:

<div class="container" id="0"> 
    <div id="1"> 
    <div class="container" id="2"> 
     <div class="container" id="3"></div> 
    </div> 
    <div id="4"> 
     <div class="container" id="5"></div> 
    </div> 
    </div> 
</div> 

Это может включать в себя больше див и глубже/другом вложенности.

Начиная с некоторого момента в дереве я хотел бы найти все контейнеры в этом поддереве, которые не вложены в другие контейнеры. Например, из div #1 Я бы хотел найти divs #2 и #5, но не #3 (так как он вложен в контейнер #2 уже найден).

Что было бы лучшим способом достичь этого?

Answer 1

Раствор, работа с произвольными исходными узлами:

function getContainers(base) { 
    return base.find('.container').not(base.find('.container .container')); 
} 

Пример: http://jsfiddle.net/tejp/GSRH2/2/

Преимущество i что это работает с произвольным стартовым узлом, который не нужно выбирать с помощью простого селектора JQuery, как это имеет место в некоторых других ответах. Также не требуется «вручную» ходить по всему дереву с children().

Этот подход также может быть легко распространен на аналогичные проблемы, например, на получение всех .item s не вложенных в .container.

Answer 2

Попробуйте использовать filter() метод JQuery в:

$items = $('#0').find('.container').filter(function(index) { 
    return !$(this).parents(':not(#0)').hasClass('container'); 
}); 

В принципе, он находит все элементы с классом .container ниже вашей верхней .container и фильтрует набор на основе того, имеет ли или нет прямых родительского класса .container.

Смотрите здесь для рабочего примера: http://jsfiddle.net/TzL8Z/1

Answer 3

проверить это: http://jsfiddle.net/GZ3Tx/