filtre d'élément enfant jQuery
| Nom | Description | Exemple | |||||||||||||||
| :nth-child(index/even/odd/equation) |
| Trouvez le 2ème li dans chaque ul : <🎜>$("ul li:nth-child(2)") | |||||||||||||||
| :premier-enfant | < 🎜>Faire correspondre le premier élément enfant<🎜><🎜>':first' ne correspond qu'à un seul élément, et ce sélecteur correspondra à un élément enfant pour chaque élément parent<🎜> | Trouvez le premier li dans chaque ul : <🎜>$("ul li:first-child") | < /tr>|||||||||||||||
| <🎜>correspond au dernier élément enfant<🎜><🎜>':last' ne correspond qu'à un seul élément, et ce sélecteur correspondra à un enfant pour chaque élément parent Element <🎜><🎜><🎜 ><🎜> | Trouvez le dernier dans chaque ul li : <🎜>$("ul li :last-child") | ||||||||||||||||
| :only-child | <🎜>Si un élément est le seul élément enfant de l'élément parent, cela correspondra <🎜><🎜 > Si l'élément parent contient d'autres éléments, il ne sera pas mis en correspondance. <🎜><🎜><🎜><🎜> | Trouvez le seul élément enfant dans ul li : <🎜>$("ul li:enfant unique") |
Remarque :
1 :nth-child(index) commence à 1, et eq(index) commence à 0, c'est-à-dire $(" ul. li:nth-child(0)").css("color","red") ne peut pas obtenir les éléments correspondants et ne peut commencer qu'à partir de 1, c'est-à-dire $("ul li:nth-child(1) ").css ("color", "red"), et eq(0) peut être obtenu, la même chose est d'obtenir le premier élément enfant
:nth-child(even) est d'obtenir le nombre pair d'éléments enfants , C'est-à-dire le deuxième, le quatrième, le sixième..., et :even commence à partir de l'index 0, correspondant au deuxième index, le quatrième index..., c'est-à-dire le premier, le troisième, Le cinquième..., il Il semble qu'ils reçoivent tous un nombre impair d'éléments, il en va de même pour :nth-child (impair) et :odd
2 :first-child correspond aux éléments enfants de chaque classe parent, et :first. correspond à un élément enfant, et il en va de même pour :last-child et last
3. only-child : correspond à un élément qui est le seul élément enfant de l'élément parent, c'est-à-dire que l'élément enfant actuel est Le seul élément de la classe correspond !
<!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 runat="server">
<title>无标题页</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
// $("ul li:first-child").css("color","red");
$("ul li:first").css("color","red");
// $("ul li:last-child").css("color","red");
// $("ul li:nth-child(even)").css("color","red");
// $("ul li:odd").css("color","red");
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>第一个元素</li>
<li>第二个元素</li>
<li>第三个元素</li>
<li>第四个元素</li>
<li>第五个元素</li>
<li>第六个元素</li>
</ul>
<ul>
<li>第一个元素</li>
<li>第二个元素</li>
<li>第三个元素</li>
<li>第四个元素</li>
<li>第五个元素</li>
<li>第六个元素</li>
</ul>
</div>
</form>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
