jQuery : cas d'utilisation du sélecteur de nième enfant

Aperçu

Correspond au Nième enfant ou élément impair-pair sous son élément parent

':eq(index)' ne correspond qu'à un seul élément, et cela correspondra à l'enfant de chaque parent élément élément. :nth-child commence à 1 et :eq() commence à 0 ! Vous pouvez utiliser :
ntième-enfant(pair)
:ntième-enfant(impair)
:ntième-enfant(3n)
:ntième-enfant(2):nth-child(3n+2)

Paramètre

indexNumberV1.1.4

Pour faire correspondre le numéro de séquence de l'élément, À partir de 1

Exemple

Description :

Trouver le 2ème li dans chaque ul

Code HTML :

<ul> 
<li>John</li> 
<li>Karl</li> 
<li>Brandon</li> 
</ul> 
<ul> 
<li>Glen</li> 
<li>Tane</li> 
<li>Ralph</li> 
</ul>

Code jQuery :

$("ul li:nth-child(2)")

Résultat :

[ <li>Karl</li>, <li>Tane</li> ]

Ce sélecteur correspond au Nième enfant ou élément impair-pair sous son élément parent. Le sélecteur
:eq(index) ne correspond qu'à un seul élément, tandis que le sélecteur :nth-child correspondra aux éléments enfants de chaque élément parent.
:nth-child commence à 1, tandis que :eq() commence à 0.
Structure grammaticale :

$(":nth-child")

Ce sélecteur est généralement utilisé en conjonction avec d'autres sélecteurs, tels que le sélecteur de classe, le sélecteur d'élément, etc. Par exemple :

$("li:nth-child(2)").css("color","blue")

Le code ci-dessus peut définir la couleur de police du deuxième élément li sous l'élément parent sur bleu. Vous pouvez également calculer les éléments enfants impairs et pairs d'un élément parent. Par exemple :

$("li:nth-child(even)").css("color","blue")

Le code ci-dessus peut définir la couleur de police de l'élément li pair sous l'élément parent sur bleu.

Remarque : Il est nécessaire d'expliquer le concept en combinaison avec le code ci-dessus. L'élément parent mentionné ici n'est pas li, mais l'élément parent de li.
Beaucoup de gens pensent souvent à tort que c'est le dernier élément des éléments enfants qui correspond à l'élément li.

Exemple de code :

  

    
ASP教程
    
ASP.NET教程
    
;PHP教程
  
  

    
html教程
    
DIV+CSS教程
    
jQUERY教程
    
jAVAScript教程
  

点击查看效果

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!