jQuery选择器"祖先后代"和"父>子"之间的区别

Question

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

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

这是选择"div"元素下"post"类的所有"ul"元素.

有什么区别吗？

Answer 1

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

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

while $("div ul.posts")将选择符合条件的所有后代.所以所有和任何ul.posts将被选中,无论它们的嵌套水平是什么,只要在链的某个地方,它们都在一个div.

Answer 2

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

第二个还会选择:

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