Разница между селекторами jQuery «потомок предка» и «родитель> потомок»

Question

Кажется, что следующие две формы селекторов jQuery делают то же самое:

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

, который должен выбрать все элементы "ul" класса "posts" под элементами "div".

Есть ли разница?

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

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

Второй также выберет:

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

Answer 3

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

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

Answer 4

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

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