Разница между селекторами jQuery "потомком предка" и "родительским" дочерним элементом "

Ответ 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>

while $("div ul.posts") выберет все потомки, соответствующие критериям. Таким образом, будут выбраны все и любые ul.posts, независимо от того, какой уровень их вложенности находится где-то вдоль цепочки, они находятся в пределах DIV.

Ответ 2

Первый выбирает только ul.posts, parentNode которого является div.

Второй вариант также будет выбирать:

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

Ответ 3

О. Таким образом, "предки-потомки" относятся ко всем указанным элементам под родителем, независимо от того, насколько глубоко вложенные

Пока "родительский ребенок" относится только к первому указанному элементу, даже если он встречается снова где-то еще под родительским

Ответ 4

Я просто добавляю здесь знакомую ссылку. Я понимаю это спустя годы после первоначального вопроса, но он был на первой странице в Google, и, возможно, это поможет кому-то другому.

Подумайте о реальных предках и родителях. Родитель и ребенок всегда разделены на одно поколение, но предки и их потомки могут быть сотнями лет друг от друга. Символ > помогает символизировать прямую связь между родителем и дочерним элементом.