Question

给出以下假设标记：

<ul class="monkey">
    <li>
        <p class="horse"></p>
        <p class="cow"></p>
    </li>
</ul>

<dl class="monkey">
    <dt class="horse"></dt>
    <dd class="cow">
        <dl>
            <dt></dt>
            <dd></dd>
        </dl>
        <dl class="monkey">
            <dt class="horse"></dt>
            <dd class="cow"></dd>
        </dl>
    </dd>
</dl>

我希望能够在每个猴子班级中获得马和牛班的“第一级”。但我不想要NESTED马和牛班。

我从.children开始，但这不适用于UL示例，因为它们不是.monkey的直接子项。

我可以使用find：$（'。monkey'）。find（'。horse，.cow'）但返回所有实例，包括嵌套的实例。

我可以过滤find：$（'。monkey'）。find（'。horse，.cow'）。not（'。cow .horse，.cow .cow'）但这阻止我选择嵌套实例在第二次函数调用。

所以...我想我正在寻找的是“找到第一个”级别的“这个后代”。我可能会通过一些循环逻辑来做到这一点，但是想知道是否有一个选择器和/或一些选择器组合可以实现该逻辑。

更新：

这是我最终的结果：

$('.monkey')
    .children('.cow')
        ...do something...
    .end()
    .children('li')
        .children('.cow')
            ...do something...
        .end()
    .end()

似乎详细/ hacky似乎有效。

Answer 1

使用孩子，因为它会为你提供直接的孩子元素。

$(".monkey").children(".horse, .cow, li > .horse, li > .cow")

被修改

$(".monkey, .monkey > li").children(".horse, .cow")

Answer 2

$('.monkey .horse:first')

http://api.jquery.com/first-selector/

Answer 3

也许是这样的？

$('.monkey>.horse, .monkey>.cow')

那应该只选择.monkey的直接子节点，你可以过滤掉你想要的.monkey对象。

Answer 4

这是正确的选择器，只允许您返回 li 和 dt 元素的第一个子元素

var selection = $(".monkey > * > .horse, .monkey > * > .cow");

通过jQuery选择类的第一个实例但不是嵌套实例

4 个答案: