Используйте jQuery для получения потомков элемента, которые не являются дочерними элементами контейнера с определенным классом CSS

У меня есть ситуация, когда мне нужно выбрать все потомки определенного элемента, но исключить те, которые являются дочерними элементами контейнера, равными классу CSS контейнера, в который я запускаю свой селектор.

Довольно сложное описание.

<div class="container">
   <div class="element"></div>
   <div class="element"></div>
   <div class="element"></div>
   <div class="element">
       <div class="container">
           <div class="element"></div>
           <div class="element"></div>
           <div class="element"></div>
       </div>
   </div>

Запуск jQuery.find('. element') в самом удаленном DIV даст мне все DIV, даже те, что находятся во втором контейнере. Этого я и стараюсь избегать.

Есть ли быстрое и простое решение для выбора jQuery для этого случая?

Ответ 1

Я думаю, что вы хотите использовать селектор not. Как это..

$(".container").not(".container .container")

В качестве альтернативы вы можете использовать селектор children, чтобы дети находились на одном уровне. Что бы исключить вложенные div.

Чтобы быть немного более явным, я думаю, что вы захотите использовать селектор после использования "find". Вот так:

$(".container").find(".element").not($(".container .container .element"))

Вы можете передать функцию, чтобы нет, поэтому вы можете заставить эту функцию посмотреть на родителей каждого элемента, чтобы увидеть, вложен ли он внутри элемента с тем же классом.

http://jsfiddle.net/QXfs2/6/

removeIfNested = function(index) {
    // this is the corrent DOM element
    var $this = $(this),
        return_value = false;

    $.each($this.attr('class').split(/\s+/), function(index) {
        if ($this.parents("." + this).length > 0) {
            return_value = default_value || true;
        }
    });

    return return_value;
}


$(".container").find(".element").not(removeIfNested);

Если вы могли бы добавить класс во вложенный контейнер, это было бы идеально, тогда оно просто:

$(".container").find(".element").not($(".nested .element"))

Предполагая, что вы добавили класс "вложенный" в свой внутренний контейнер div.

Ответ 2

В вашем конкретном примере это будет работать -

$("body > div.container > .element")

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

Демо - http://jsfiddle.net/QAP37/

Ответ 3

Вы можете использовать селектор jquery следующим образом:

find('*:not(.container .container *)')