Maison  >  Article  >  interface Web  >  jQuery : cas d'utilisation du sélecteur de nième enfant

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

黄舟
黄舟original
2017-06-23 14:01:581761parcourir

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn