Maison > Article > interface Web > 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 :0c6dc11e160d3b678d68754cc175188antième-enfant(pair)0c6dc11e160d3b678d68754cc175188a:ntième-enfant(impair)0c6dc11e160d3b678d68754cc175188a:ntième-enfant(3n)0c6dc11e160d3b678d68754cc175188a:ntième-enfant(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 :
:nth-child选择器
- 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!