JQuery получить только элементы верхнего уровня

Question

Мне нужно получить только первые подходящие элементы из моего дерева (если элемент был найден, нет необходимости углубляться). Проблема в том, что этот элемент может быть заключен во вложенные элементы div, поэтому я не могу использовать > selector.
Мой код такой:

<div id="root">
    <div class="sub">I need this element</div>
    <div>
        <div class="sub">I need this element</div>
    </div>
    <div class="sub">
        <div class="sub">I don't need this element</div>
    </div>
</div>

Не могу найти решение: (

Answer 1

Если вы не можете использовать дочерний селектор, попробуйте

$('.sub:not(.sub .sub)')

Выбирает только те элементы .sub, которые не являются потомками других элементов .sub.

В качестве альтернативы:

$('#root .sub').filter(function() {
    return $(this).parentsUntil('#root', '.sub').length === 0;
});

, который также работает, если #root находится внутри .sub.

Редактировать: Или см. Комментарий @ RightSaidFred по этому делу.

Answer 2

Вы можете использовать:

$('.sub').parent().not('.sub').children().css('color', 'green');

, которая является подробной версией:

$('.sub:not(.sub .sub)').css('color', 'green');

Редактировать: jsfiddle

Answer 3

Вам понадобится элемент или класс, который находится выше первого div, затем укажите {parent-selector}>

$('#root > div.sub').click(function(){
    // your code here
});

Answer 4

var level = $('#root'),
    subs;

do {
    level = level.children();
    subs = level.filter('.sub');
} while( els.length && !subs.length )

Переменная subs будет содержать результат.

Это эффективный подход, который сработает, если у вашего #root окажется .sub предок.

Вы можете легко превратить его в функцию многократного использования.

function firstLevelOf( root, selector ) {
    var level = $(root),
        result;

    do {
        level = level.children();
        result = level.filter(selector);
    } while( els.length && !result.length )

    return result;
}

Используйте это так:

var subs = firstLevelOf( '#root', '.sub' );