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

Question

У меня есть ситуация, в которой мне нужно выбрать всех потомков определенного элемента, но исключить тех, которые являются потомками контейнера, равного классу 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 для этого случая?

Answer 1

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

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

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

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

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

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

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.

Answer 2

Для вашего конкретного примера это сработает -

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

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

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

Answer 3

Я нашел следующее несколько более кратким и общим, чем выбранный ответ.Он работает с произвольно глубоко вложенными деревьями:

function getNonNestedElements(container, elementSelector, containerSelector) {
  return container.find(elementSelector).not(function(index) {
    var nearest = $(this).closest(containerSelector);
    return nearest[0] !== container[0];
  });
}

, где:

• container - это объект jQuery для корневого "контейнера" ​​div
• elementSelector является селектором jQuery для элемента, .element в этом случае
• containerSelector является селектором jQuery для контейнера, .container в этом случае

Так что это находитвсе элементы ниже начального контейнера, затем для каждого элемента проверяется, является ли его ближайший контейнер начальным контейнером или каким-либо другим вложенным контейнером.Если его ближайший контейнер является вложенным, он выбрасывает его, поэтому у вас просто остаются потомки, которых нет в другом контейнере.

Очень удобно для таких вещей, как повторение многоэлементных вложенных полей формы.

Answer 4

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

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