如何使用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），为什么要使用你不需要的东西？