Как настроить таргетинг на конкретный родительский 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, что это лучший способ ориентации элемента списка, который имел класс «обернуть», но не является ребенок из вложенной ul? В качестве альтернативы, как я могу пометить li с классом «wrap», который вложен в ul, который вложен в li?

Answer 1

что-то вроде этого, я считаю:

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

Answer 2

Для ун-гнездового ли, у вас есть два варианта:

$('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 

Для вложенной Ли:

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

Answer 3

уль который вложен в лигу:

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

уль который не вложен литием:

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

Answer 4

У вас есть «внешний» ул и «внутренней» ул. Выбор внутренней 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); 

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