Jaka jest różnica bezpośredniego potomka (>) kontra potomka w selektorach jQuery?

Question

Jaka jest różnica między tymi dwoma instrukcjami jQuery? Wydaje się, że robią to samo, pobierając wszystkie znaczniki div dzieci.

$("#mainblock div") 

$("#mainblock > div") 

Answer 1

$("#mainblock > div") = tylko Childs poziom

$("#mainblock div") = wszystkie Childs + desendents.

Answer 2

Pierwszy z nich dostanie wszystko div s potomka #mainblock. Drugi dostanie wszystkie div s, które są natychmiastowe dzieci #mainblock

Answer 3

Wystarczy popatrzeć na jQuery Selectors

Child Selector ("parent > child") - Hierarchia wybiera wszystkie bezpośrednie elementy podrzędne określone przez „dziecko” elementów określonych przez „rodzic”.

Descendant Selector ("ancestor descendant")- Hierarchia Wybiera wszystkie elementy, które są potomkami danego przodka.

Answer 4

$("#mainblock div") 

Pasuje do dowolnego elementu div będącego potomkiem #mainblock.

$("#mainblock > div") 

Pasuje do dowolnego elementu div, który jest dzieckiem #mainblock.

check http://www.w3.org/TR/CSS2/selector.html

Answer 5

Pierwszy z nich wybierze dowolny div, który jest dzieckiem `#mainblock” na dowolnym poziomie. Drugi wybierze dowolny div, który jest bezpośrednim dzieckiem.

Zobacz ten link uzyskać więcej informacji na temat CSS > selektor, który zachowuje się tak samo jak w jQuery.

Answer 6

$("#mainblock div") 

Ten cel wszystkie DIV wewnątrz „#mainblock” nie ma znaczenia to bezpośredni dzieckiem „#mainblock”, czy dziecko z dzieckiem głównego bloku lub tak dalej.

$("#mainblock > div") 

Spowoduje to skierowanie tylko bezpośrednich potomków DIV z "#mainblock" i zignorowanie innych DIV. Ten jest szybszy niż powyżej, jeśli masz tylko bezpośrednie dziecko. Ponieważ nie jest to próba odnalezienia innych elementów dziecka.

Answer 7

$ ("# mainblock div") znaleźć wszystkie DIV pod #mainblock

$ ("# mainblock> div") tylko znaleźć jej dziecko

załóżmy, że masz poniżej struktury HTML:

<div id="mainblock"> 
     <div> 
     <div></div> 
     <div></div> 
     </div> 
    <div></div> 
    <div></div> 
    </div> 

Następnie

$("#mainblock div").length = 5 
$("#mainblock > div").length = 3