recherche

Maison >interface Web >js tutoriel >Que signifie nth-child(3n) dans jquery ?

Que signifie nth-child(3n) dans jquery ?

黄舟
黄舟original
2017-06-23 14:19:143128parcourir

:nth-child signifie faire correspondre les éléments enfants en dessous : nth-child(Xn+Y) signifie partir du Yth. Augmenter X peut avoir : nth-child(3n+10) signifie partir du 10ème. , 10, 13, 16, 19...:ntième-enfant(3n), alors Y=0, qui peut être omis, indiquant à partir de 0, 0, 3, 6, 9...

J'espère que vous êtes utile : l'élément enfant 

:nth-child(index/even/odd/equation)

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

Différence : ' : eq(index)' correspond uniquement à un élément An, et celui-ci correspondra aux éléments enfants de chaque élément parent. :nth-child commence à 1 et :eq() commence à 0 !

Vous pouvez utiliser ::nth-child(pair), :nth-child(impair), :nth-child(3n), :nth-child(2), :nth-child(3n+1 ) , :nth-child(3n+2)

index (Number) : Le numéro de série de l'élément à faire correspondre, à partir de 1

L'exemple trouve le 2ème li

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

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

Résultat :

<li>Karl</li>, <li>Tane</li>

ème-enfant(3n+1) Qu'est-ce que ça veut dire ? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.2.6.js" type="text/javascript" language="javascript"></script>
<style type="text/css">
<!--
-->
</style>
<script type="text/javascript" language="javascript" >
<!--
$(document).ready(function (){
$("#nav li:nth-child(3n+2) a").each(function(){
alert($(this).text());
});
});
-->
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
</ul>
</body>
</html>
« :nth-child signifie faire correspondre les éléments enfants en dessous : nth-child(Xn+Y) signifie commencer à partir du Yth, et augmenter X peut avoir :nth-child(3n+10 ) signifie à partir du 10ème, 10, 13, 16, 19...:ntième enfant (3n), alors Y=0, qui peut être omis, signifie à partir de 0, 0, 3, 6, 9... " Cette personne a répondu Y a-t-il quelque chose qui ne va pas ? Il semble que le paramètre minimum du nième enfant soit 1, et il commence à partir de 1, pas de 0.

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
Article précédent：Le sélecteur pour sélectionner les éléments enfants dans jquery est le sélecteur nième enfantArticle suivant：Le sélecteur pour sélectionner les éléments enfants dans jquery est le sélecteur nième enfant

Articles Liés

Voir plus