如何使用jQuery定位特定的父div

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中的ul的“wrap”類來taget 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

與li嵌套的ul：

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

沒有與li嵌套的ul：

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

Answer 3

我相信這樣的事情：

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

Answer 4

你有一個“外部”ul和一個“內部”ul。 選擇內部ul非常簡單，只需使用descendent-selector 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），為什么要使用你不需要的東西？