jQuery differenza tra: eq () e: nth-child ()

In jQuery, quali sono alcune delle differenze fondamentali tra l'utilizzo di: eq () e: nth-child () per select qualsiasi elemento?

Anche in generale, per l'indice di partenza, in quale caso inizia da "0" e quando inizia da "1"?

: eq ()

Selezionare l'elemento nell'indice n all'interno del set corrispondente.

I selettori correlati all'indice (: eq (), lt (), gt (),: even,: odd) filtrano l'insieme di elementi che hanno corrispondenza alle espressioni che li precedono. Riduce l'impostazione in base all'ordine degli elementi all'interno di questo set corrispondente. Ad esempio, se gli elementi vengono prima selezionati con un selettore di class (.myclass) e vengono restituiti quattro elementi, questi elementi sono indicati da 0 a 3 per gli scopi di questi selettori.

: nth-child ()

Seleziona tutti gli elementi che sono il n-figlio del loro genitore.

Poiché l'implementazione di jQuery di: n-child (n) è strettamente derivata dalla specifica CSS, il valore di n è "1-indexed", il che significa che il count inizia a 1. Per tutte le altre espressioni di selettore, tuttavia, jQuery segue " 0-indicizzato "count. Pertanto, dato un singolo contenente due <li> s, $('li:nth-child(1)') seleziona il primo <li> mentre $('li:eq(1)') seleziona il secondo.

La pseudo-class n-bambino (n) è facilmente confusa con: eq (n), anche se i due possono provocare elementi abbinati drammaticamente diversi. Con: n-child (n) tutti i bambini vengono contati, a prescindere da quello che sono e l'elemento specificato viene selezionato solo se corrisponde al selettore associato alla pseudo-class. Con: eq (n) viene contato solo il selettore associato alla pseudo-class, non limitato ai bambini di qualsiasi altro elemento, e il n (n + 1) (n è basato su 0).

La notazione pseudo-class nth-child (an + b) rappresenta un elemento che possiede un figlio + b-1 prima dell'tree del documento, per qualsiasi valore integer positivo o zero di n e ha un elemento genitore. Per i valori di a e b maggiore di zero, questo effettua effettivamente i figli dell'elemento in gruppi di elementi (l'ultimo gruppo che prende il resto) e seleziona l'elemento bth di ciascun gruppo. Ad esempio, questo consente ai selettori di affrontare each altra row di una tabella e possono essere utilizzati per alternare il colore del text di paragrafo in un ciclo di quattro. I valori a e b devono essere interi (positivi, negativi o zero). L'indice del primo figlio di un elemento è 1.

Oltre a questo, il nth-child () può assumere 'dispari' e 'anche' come argomenti. 'strano' ha lo stesso significato di 2n + 1, e 'anche' ha lo stesso significato di 2n.

Ulteriori discussioni su questo uso insolito possono essere trovate nella specifica CSS di W3C .

Confronto dettagliato

Vedere il Demo: http://jsfiddle.net/rathoreahsan/sXHtB/ – Link aggiornato

Vedi anche i riferimenti

http://api.jquery.com/eq-selector/

http://api.jquery.com/nth-child-selector/

:nth-child() Selettore: seleziona tutti gli elementi che sono il n- figlio del loro genitore.

:eq() Selettore: select l'elemento nell'indice n all'interno del set corrispondente .

Vedi: http://api.jquery.com/eq-selector/ e http://api.jquery.com/nth-child-selector/

In bocca al lupo.

:eq() consente di accedere agli elementi dell'object jQuery per indice

http://api.jquery.com/eq-selector/

:nth-child ti permette anche di accedere all'elemento per indice, ma si applica solo al termine alla sinistra immediata di esso.

http://api.jquery.com/nth-child-selector/

Ciò significa che se si desidera scegliere un elemento da un selettore, utilizzare: eq se si desidera limitare le selezioni agli elementi con n-1 precedente-sibilings quindi utilizzare nth-child.

Gli arrays Javascript sono di solito indicizzati da 0; tuttavia nth-child è indicizzato da 1 perché è tecnicamente una properties; CSS in contrasto con un jQuery.

eq () inizia con 0, mentre nth-child () inizia con 1

vedere le differenze chiaramente qui http://jsfiddle.net/9xu2R/

 $("#dataTable tr:nth-child(1) td:nth-child(2)").html(); 

qui il dataTable è una tabella

 <table id="dataTable" width="50%"> <thead> <th>Name</th> <th>EnrollNo.</th> </thead> <tbody> <tr> <td>Somdip</td><td>IT001<td> </tr> <tr> <td>Sanyal</td><td>IT002<td> </tr> </tbody> </table> 

Il selettore nth-child di jquery ti aiuterà a recuperare i valori della cella esatta da questa tabella. Un esempio pratico where tr:nth-child(1) td:nth-child(2) recupera la cella 1,2 della tabella.

n-bambino seleziona il n ° figlio dell'object padre altri seleziona l'elemento n in una collezione (l'indice partendo da 0 o 1 è solo una parte banale la differenza). così dicendo che il n-bambino (5) sceglie each tr e ottiene i loro quinti bambini where come eq ottiene tutti i tds in tutti i tr e seleziona solo 5th td … La differenza principale è che. Infatti la formulazione della documentazione non indica quel fatto diretto ma guarisce le parole come la magia nera …

:eq è un arrays indice basato, quindi inizia da 0. Non è anche parte della specifica Css.

Considerando che il :nth-child fa parte della specifica Css e si riferisce alla posizione dell'elemento in un tree DOM.

In termini di utilizzo, entrambi fanno la stessa cosa.

Demo qui