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

【问题标题】：Selecting first instance of class but not nested instances via jQuery通过jQuery选择类的第一个实例而不是嵌套实例
【发布时间】：2011-02-16 10:50:49
【问题描述】：

给定以下假设标记：

<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 horse 和 cow 课程。

我从 .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，但似乎有效。

【问题讨论】：

标签： jquery

【解决方案1】：

使用子元素，因为它为您提供直接子元素。

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

编辑

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

【讨论】：

这是一个很好的观点。我想我可以决定他们需要是直系子女还是孙子女，然后就这样吧。这可能是最好的选择。
嗯......好吧，后代选择器似乎在 children() 遍历中不起作用。
试试上面的修改版

【解决方案2】：

$('.monkey .horse:first')

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

【讨论】：

:first 返回第一个元素。不是“第一个”后代级别的一组元素。

【解决方案3】：

也许是这样的？

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

这应该只选择 .monkey 的直接子级，您可以过滤掉您想要的 .monkey 对象。

【讨论】：

这也将返回嵌套元素。
问题是我最初将链附加到“.monkey”查询。我宁愿不要第二次遍历 DOM 来获取孩子。

【解决方案4】：

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

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

【讨论】：