Как настроить таргетинг на определенный родительский div с помощью jQuery

Question

Давайте возьмем этот HTML-код, например:

<ul class="wrap">
 <li class="out"></li>
 <li class="out"></li>
 <li class="out">
     <ul class="wrap">
        <li class="out"></li>
        <li class="out"></li>
     </ul>
 </li>
</ul>

С помощью jQuery, каков наилучший способ нацеливания на элемент списка, который имеет класс «wrap», но не является потомком вложенного ul? В качестве альтернативы, как я могу изменить li с помощью класса "wrap", который вложен в ul, который вложен в li?

Answer 1

Для не вложенного li у вас есть два варианта:

$('ul.wrap:has(ul) > li') // For uls that specifically have a nested ul inside
$('ul.wrap > li:not(ul ul > li)') // For any top-level ul

Для вложенного li:

$('ul.wrap ul.wrap > li')

Answer 2

ul, который вложен в li:

$("li > ul.wrap > li")

ul, который не вложен в li:

$("ul.wrap li:not(li > ul >li)")

Answer 3

У вас есть "внешняя" ul и "внутренняя" ul. Выбрать внутренний ul очень просто, вы просто используете потомок-селектор ul.wrap ul.wrap. Во внешнем случае это немного сложно, потому что вам нужно будет использовать условие с неселектором: ul.wrap:not(ul.wrap ul.wrap). Вы в основном говорите: дайте мне все ul.wrap, у которых нет родителей, у которых есть оболочка. Если вы хотите выбрать «li», используйте прямой селектор, т.е. > li за каждым селектором.

Я добавил его в пример, чтобы вы показали, что он работает:

Html:

<ul class="wrap" tag="outer">
 <li class="out"></li>
 <li class="out"></li>
 <li class="out">
     <ul class="wrap" tag="inner">
        <li class="out"></li>
        <li class="out"></li>
     </ul>
 </li>
</ul>

JQuery:

alert($('ul.wrap:not(ul.wrap ul.wrap)').attr('tag'));
alert($('ul.wrap ul.wrap').attr('tag'));

alert($('ul.wrap:not(ul.wrap ul.wrap) > li').length);
alert($('ul.wrap ul.wrap > li').length);

Ps. Я бы не использовал селектор 'li', чтобы найти внешнюю или внутреннюю ul. Вы можете столкнуться с пустыми ul, если вы заполняете их программно (что порождает селектор, зависящий от li), и почему вы должны использовать то, что вы делаете не нужно?

Answer 4

как-то так, я считаю:

$("ul.wrap li ul.wrap")