JQuery différence entre: eq () et: nth-child ()

: Eq ()

Sélectionnez l'élément à l'index n dans l'ensemble apparié.

Les sélecteurs liés à l'index (: eq (),: lt (),: gt (),: even,: odd) filtrent l'ensemble des éléments qui ont correspondu aux expressions qui les précèdent. Ils réduisent le réglage en fonction de l'ordre des éléments dans cet ensemble adapté. Par exemple, si les éléments sont sélectionnés pour la première fois avec un sélecteur de classe (.myclass) et quatre éléments sont renvoyés, ces éléments reçoivent des indices 0 à 3 aux fins de ces sélecteurs.

: Nth-child ()

Sélectionne tous les éléments qui sont le n-enfant de leur parent.

Étant donné que la mise en œuvre de jQuery de: nth-child (n) est strictement dérivée de la spécification CSS, la valeur de n est "1-indexée", ce qui signifie que le comptage commence à 1. Pour toutes les autres expressions de sélection, jQuery suit JavaScript " Comptage indexé 0. Par conséquent, étant donné qu'un seul contenant deux <li> s, $('li:nth-child(1)') sélectionne le premier <li> tandis que $('li:eq(1)') sélectionne le second.

La pseudo-classe nth-child (n) est facilement confondue avec: eq (n), même si les deux peuvent entraîner des éléments correspondants radicalement différents. Avec: nth-child (n), tous les enfants sont comptés, indépendamment de ce qu'ils sont, et l'élément spécifié est sélectionné uniquement s'il correspond au sélecteur attaché à la pseudo-classe. Avec: eq (n), seul le sélecteur attaché à la pseudo-classe est compté, non limité aux enfants d'un autre élément, et le (n + 1) th (n est basé sur 0) est sélectionné.

La notation de pseudo-classe nth-child (an + b) représente un élément qui a des frères et sœurs + b-1 avant elle dans l'arborescence du document, pour tout entier positif ou valeur zéro de n, et a un élément parent. Pour les valeurs de a et b supérieures à zéro, cela divise efficacement les enfants de l'élément en groupes d'éléments (le dernier groupe prenant le reste) et en sélectionnant l'élément bth de chaque groupe. Par exemple, cela permet aux sélecteurs de traiter toutes les autres lignes d'une table et peuvent être utilisés pour alterner la couleur du texte de paragraphe dans un cycle de quatre. Les valeurs a et b doivent être des nombres entiers (positifs, négatifs ou zéro). L'index du premier enfant d'un élément est 1.

En plus de cela,: nth-child () peut prendre 'odd' et 'even' comme arguments à la place. 'Impair' a la même signification que 2n + 1, et 'pair' a la même signification que 2n.

Vous trouverez plus d'informations sur cette utilisation inhabituelle dans la spécification CSS W3C .

Comparaison détaillée

Voir la Demo: http://jsfiddle.net/rathoreahsan/sXHtB/ – Lien mis à jour

Voir aussi les références

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

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

:nth-child() Sélecteur: sélectionne tous les éléments qui sont le n- enfant de leur parent.

:eq() Sélecteur: sélectionnez l'élément à l'index n dans l' ensemble assorti .

Voir: http://api.jquery.com/eq-selector/ et http://api.jquery.com/nth-child-selector/

Bonne chance.

:eq() vous permet d'accéder aux éléments de l'objet jQuery par index

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

:nth-child vous permet également d'accéder à l'élément par un index, mais il ne s'applique qu'au terme à sa gauche immédiate.

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

Cela signifie que si vous souhaitez choisir un élément à partir d'un sélecteur, utilisez: eq si vous souhaitez restreindre les sélections aux éléments avec n-1 précédents-sibilings, utilisez nth-child.

Les tableaux Javascript sont généralement indexés de 0; Cependant, le n-enfant est indexé de 1 car il s'agit techniquement d'une propriété CSS par opposition à une jQuery.

Eq () commence par 0, tandis que nth-child () commence par 1

Voyez clairement les différences ici http://jsfiddle.net/9xu2R/

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

Ici dataTable est une table

 <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> 

Le sélecteur Nth nth-child de jquery vous aidera à récupérer les valeurs de cellule exactes de cette table. Un exemple pratique où tr:nth-child(1) td:nth-child(2) récupère la cellule 1,2 de la table.

Nth-child sélectionne le nième enfant de l'objet parent d'autre sélectionne le n-ième élément dans une collection (l'indice à partir de 0 ou 1 n'est qu'une partie insignifiante de la différence). Disant que tt: nth-child (5) sélectionne chaque tr et obtient ses 5èmes enfants où, comme eq, obtient tous les tds dans tous les trs et ne sélectionne que le 5ème td … La principale différence est celle. En effet, le libellé de la documentation ne fait pas ressortir ce fait en ligne droite mais arrête les mots comme c'est la magie noire …

:eq est indexé par tableau, donc il commence à partir de 0. Il ne fait pas non plus partie de la spécification Css.

Considérant que :nth-child fait partie de la spécification Css et se réfère à la position de l'élément dans un arbre DOM.

En termes d'utilisation, ils font tous deux la même chose.

Démonstration ici