How to target a specific parent div using jQuery

Question

Let's take this HTML for example:

<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>

Using jQuery, what's the best way of targeting the list item that had a class of "wrap" but is not a child of the nested ul? Alternatively, how can I taget the li with a class of "wrap" that is nested in a ul which is nested in an li?

Answer 1

For the un-nested li, you have two options:

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

For the nested li:

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

Answer 2

ul which is nested with li:

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

ul which is not nested with li:

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

Answer 3

我相信这样的事情：

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

Answer 4

You have an "outer" ul and an "inner" ul. Selecting the inner ul is very easy, you just use a descendent-selector ul.wrap ul.wrap . In outer one is a little bit tricky, because you'll need to use a condition with a not selector: ul.wrap:not(ul.wrap ul.wrap) . You're basically saying: give me all the ul.wrap that do do not have a parent that have a wrap. If you want to select the "li's" use the direct selector ie > li behind each selector.

I've added it to an example for you to show it works:

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. I wouldn't use 'li' selector to find the outer or inner ul. You might encounter empty ul's if you fill them programatically (which will break a selector with that's dependent on li) and why should you use something you don't need?