jQuery选择器“祖先后代”和“父级＆gt;子”之间的区别

Question

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

• $（“div＆gt; ul.posts”）
• $（“div ul.posts”）

用于选择“div”元素下“post”类的所有“ul”元素。

有什么不同吗？

Answer 1

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

<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内。

Answer 2

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

第二个也会选择：

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

Answer 3

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

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

Answer 4

我只是在这里添加熟悉的参考资料。我意识到这是原始问题之后的几年，但是它出现在谷歌的第一页上，也许这会帮助其他人。

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