web-dev-qa-db-fra.com

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

Dans jQuery, quelles sont les différences principales entre l’utilisation de: eq () et: nth-child () pour sélectionner des éléments?

Aussi en général, pour l'index de départ, dans quel cas commence-t-il à partir de "0" et quand il commence à "1"?

javascriptjquerydomjquery-selectors
31
testndtv

: eq ()

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

Les sélecteurs liés à l'index (: eq (),: lt (),: gt (),: pair,: impair) filtrent l'ensemble des éléments ayant correspondu aux expressions qui les précèdent. Ils rétrécissent la définition en fonction de l'ordre des éléments dans cet ensemble apparié. Par exemple, si les éléments sont d'abord sélectionnés avec un sélecteur de classe (.myclass) et que quatre éléments sont renvoyés, ces éléments se voient attribuer les indices 0 à 3 pour les besoins de ces sélecteurs.

: nth-child ()

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

Étant donné que l'implémentation de: nth-child (n) par jQuery est strictement dérivée de la spécification CSS, la valeur de n est "indexé 1", ce qui signifie que le comptage commence à 1. Pour toutes les autres expressions de sélecteur, jQuery suit JavaScript " "Indexé par 0". Par conséquent, étant donné qu'un seul contient 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 donner lieu à des éléments correspondants extrêmement différents. Avec: nth-child (n), tous les enfants sont comptés, quelle que soit leur nature, et l'élément spécifié n'est sélectionné que s'il correspond au sélecteur associé à la pseudo-classe. Avec: eq (n), seul le sélecteur attaché à la pseudo-classe est compté, sans limitation pour les enfants de tout autre élément, et le (n + 1) ème (n est basé sur 0) est sélectionné.

La pseudo-classe: nth-child (an + b) représente un élément précédé d'un frère + b-1 dans l'arborescence du document, pour tout entier positif ou toute valeur nulle de n, et possède un élément parent. Pour les valeurs de a et b supérieures à zéro, cela divise effectivement les enfants de l'élément en groupes d'un élément (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 s’adresser à une ligne sur une autre du tableau et peut être utilisé pour alterner la couleur du texte de paragraphe dans un cycle de quatre. Les valeurs a et b doivent être des entiers (positif, négatif ou nul). L'index du premier enfant d'un élément est 1.

De plus, nth-child () peut prendre comme arguments "impair" et "pair". «Impair» a la même signification que 2n + 1 et «pair» a la même signification que 2n. 

Vous trouverez plus de détails sur cet usage inhabituel dans la spécification CSS du W3C .

Comparaison détaillée

Voir la démo: 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/

54
Ahsan Rathod

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

:eq() Selector: Sélectionnez l’élément à l’indice n dans le ensemble correspondant.

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

Bonne chance.

13
defuz

: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 à un élément par son index. Toutefois, il ne s'applique qu'au terme situé immédiatement à gauche de celui-ci.

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

Cela signifie que si vous voulez choisir un élément dans un sélecteur, utilisez: eq si vous souhaitez limiter les sélections aux éléments avec n-1 précédant-sibilings, puis utilisez nth-child.

Les tableaux Javascript sont généralement indexés à partir de 0; cependant, nth-child est indexé à partir de 1 car il s'agit techniquement d'une propriété CSS et non de jQuery.

7
MikeBaker

eq () commence par 0, alors que nth-child () commence par 1

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

0
JSantos

CSS: first-child,: nth-child et: last-child ne ressemblent pas à: eq 

Donc, si nous avions un extrait de code HTML comme

<div>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

Ensuite, le sélecteur .foo: nth-child (2) correspondra à div # bar2. Si nous insérons un autre élément à l'avant du conteneur:

<div>
    <p>Shift!</p>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

Et encore une fois, nous sélectionnons .foo: nth-child (2), nous correspondons à div # bar1 car le deuxième enfant du conteneur correspond également à .foo.

Ainsi, dans ce deuxième exemple, si nous essayons .foo: nth-child (1) ou l’équivalent .foo: first-child, nous ne rechercherons aucun élément car le premier élément enfant de ce conteneur - la balise p - ne match .foo.

De même, nth-child peut associer des enfants dans plusieurs conteneurs. Dans l'extrait de code HTML:

<div>
    <p>Shift!</p>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

<div>
     <div id="quux" class="foo"></div>
</div>

le sélecteur .foo: last-child correspondra aux divs # bar3 et #quux; mais .foo: first-child ou .foo: nth-child (1) ne fera correspondre que #quux car le premier enfant du premier conteneur n'est, encore une fois, pas un .foo.

Source https://content.pivotal.io/blog/css-first-child-nth-child-and-last-child-are-not-like-eq

0
Phuc Nguyen

nth-child sélectionne le nième enfant du ou des objet (s) parent, autre sélectionne le n-ème élément d'une collection (l'index commençant par 0 ou 1 n'est qu'une partie triviale de la différence). child (5) sélectionne tous les tr et obtient leur 5ème enfant alors que eq obtient tous les tds dans tous les cas et ne sélectionne que le 5ème td ... La différence principale est que. En effet, le libellé de la documentation ne le souligne pas directement mais brouille les mots comme si c'était de la magie noire ...

0
karadeniz
$("#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-child de jquery vous aidera à extraire les valeurs exactes des cellules de cette table. Un exemple pratique où tr:nth-child(1)td:nth-child(2) extrait la cellule 1,2 de la table. 

0
somdip