jQuery选择器“祖先后代”和“父>子”之间的区别答案

【问题标题】：Difference between jQuery selectors "ancestor descendant" and "parent > child"jQuery选择器“祖先后代”和“父>子”之间的区别
【发布时间】：2008-10-15 04:17:29
【问题描述】：

以下两种形式的 jQuery 选择器似乎做同样的事情：

$("div > ul.posts")
$("div ul.posts")

即选择“div”元素下“posts”类的所有“ul”元素。

有什么不同吗？

【问题讨论】：

标签： jquery

【解决方案1】：

关于$("div > ul.posts")，只会选择DIVs 的直系后代。

<div>
    <ul class="posts"> <!--SELECTED-->
        <li>List Item</li>
        <ul class="posts"> <!--NOT SELECTED-->
            <li>Sub list item</li>
        </ul>
    </ul>

    <fieldset>
        <ul class="posts"> <!--NOT SELECTED-->
            <li>List item</li>
        </ul>
    </fieldset>

    <ul class="posts"> <!--SELECTED-->
        <li>List item</li>
    </ul>
</div>

而$("div ul.posts") 将选择所有符合条件的后代。因此，所有和任何ul.posts 都将被选中，无论它们的嵌套级别如何，只要沿着链的某个位置，它们都在div 内。

【讨论】：

抱歉删除，评论不再相关；)
我很惊讶你能够删除它。看来您可以删除自己帖子下的cmets，给我消息！保重。
我希望 jQuery 文档像这样清晰。谢谢。

【解决方案2】：

第一个只选择parentNode为div的ul.posts。

第二个也会选择：

<div>
    <blockquote>
        <ul class="posts"></ul>
    </blockquote>
</div>

【讨论】：

【解决方案3】：

哦。所以“祖先后代”是指父元素下的所有指定元素，无论嵌套多深

虽然“父子元素”仅指第一个指定元素，即使它再次出现在父元素之下的其他地方

【讨论】：

【解决方案4】：

我只是在这里添加一个熟悉的参考。我意识到这是在最初的问题之后多年，但它在 Google 的第一页上，也许这对其他人有帮助。

想想现实世界的祖先和父母。父母和孩子总是相隔一代，但祖先和他们的后代可以相隔数百年。 > 符号有助于象征父母和孩子之间的直接关系。

【讨论】：