Qual è la differenza diretta discendente (>) vs. discendente nei selettori jQuery?

Question

Qual è la differenza tra queste due dichiarazioni jQuery? Sembrano fare la stessa cosa ottenendo tutti i tag div dei bambini.

$("#mainblock div") 

$("#mainblock > div") 

Answer 1

$("#mainblock > div") = solo i bambino livello

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

Answer 2

Il primo otterrà tutta div s discendente di #mainblock. Il secondo sarà ottenere tutti div s che sono figli immediati di #mainblock

Answer 3

Dai un'occhiata alla jQuery Selectors

Child Selector ("parent > child") - Gerarchia di selezionare tutti gli elementi figli diretti specificati da "figlio" di elementi specificati da "genitore".

Descendant Selector ("ancestor descendant")- Gerarchia Seleziona tutti gli elementi che sono discendenti di un dato antenato.

Answer 4

$("#mainblock div") 

Corrisponde a qualsiasi elemento div che è un discendente di #mainblock.

$("#mainblock > div") 

Corrisponde a qualsiasi elemento div figlio di #mainblock.

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

Answer 5

Il primo sarà selezionare qualsiasi div che è un figlio di `#mainblock' a qualsiasi livello. Il secondo selezionerà qualsiasi div che è un bambino immediato.

Vedere questo link per ulteriori informazioni sul selettore CSS > che si comporta come in jQuery.

Answer 6

$("#mainblock div") 

Questo obiettivo tutti i DIV dentro "#mainblock" Non importa che sia figlio diretto di "#mainblock", o il figlio di figlio di blocco principale o così via.

$("#mainblock > div") 

Questo si rivolgerà solo DIV figlio diretto "#mainblock" e ignorare altri DIV. Questo è più veloce di sopra nel caso in cui tu abbia solo figli diretti. Perché non è cercare di trovare dentro altri elementi di childs.

Answer 7

$ ("# mainblock div") trovare tutti i div sotto #mainblock

$ ("# mainblock> div") ha trovato solo il suo bambino

si supponga di avere sotto struttura HTML:

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

Poi

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