разница между JQuery селекторы "предком потомка" и "родитель> ребенок"

Question

Следующие две формы JQuery селекторы, кажется, сделать то же самое:

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

который должен выбрать все элементы «ul» класса «сообщения» под элементами «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

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

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