如何使用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”类的li？

- say

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

- David Tang

Answer 2

嵌套有 li 的 ul：

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

未嵌套在li中的ul：

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

- xandy

Answer 3

我相信应该是这样的：

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

- BvdVen

Answer 4

你有一个“外部” ul 和一个“内部” ul。选择内部 ul 很容易，只需使用后代选择器 ul.wrap ul.wrap。外部的选择有点棘手，因为你需要使用带有 not 选择器的条件: ul.wrap:not(ul.wrap ul.wrap)。基本上你是在说: 给我所有没有拥有一个 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的选择器），为什么要使用您不需要的东西呢？

- Kees C. Bakker

---

在这个页面上阅读一些关于选择器的内容可能会很有用：http://api.jquery.com/category/selectors/。玩得开心！ - Kees C. Bakker