communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

filtre d'élément enfant jQuery


< /tr>< td width="193" valign="top" style="word-break: break-all;">:dernier-enfant
NomDescriptionExemple
:nth-child(index/even/odd/equation)
名称说明举例
:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

可以使用: 
nth-child(even) 
:nth-child(odd) 
:nth-child(3n) 
:nth-child(2) 
:nth-child(3n+1) 
:nth-child(3n+2)

在每个 ul 查找第 2 个li: 
$("ul li:nth-child(2)")
:first-child

匹配第一个子元素

':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

在每个 ul 中查找第一个 li: 
$("ul li:first-child")
:last-child

匹配最后一个子元素

':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素


在每个 ul 中查找最后一个 li: 
$("ul li:last-child")
:only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。


在 ul 中查找是唯一子元素的 li: 
$("ul li:only-child")
Faire correspondre son élément parent Le Nième élément enfant ou impair-pair sous <🎜><🎜>':eq(index)' ne correspond qu'à un seul élément, et cela correspondra à l'élément enfant de chaque élément parent. :nth-child commence à 1 et :eq() commence à 0 ! <🎜><🎜>Peut être utilisé : <🎜>nth-child(pair) <🎜>:nth-child(impair) <🎜>:nth-child(3n) <🎜>:nth-child(2) < 🎜 >:nth-child(3n+1) <🎜>:nth-child(3n+2)<🎜>		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")
<🎜>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>


Formation continue
||
<!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> </head> <script> $(function(){ // 1选取父元素下索引值是偶数的子元素的索引值(索引值从1开始的) //找到当前元素的父元素，在找他下面的子元素 $("span.child:nth-child(even)").css("fontSize","30px"); //2选取父元素下,索引值是奇数的元素(索引值从1开始) $("span.child:nth-child(odd)").css("color","red"); //3匹配每个父元素下，索引值为xx的子元素,索引从1开始 $("span.child:nth-child(1)").css("color","blue"); //4匹配每个父元素的第一个子元素 $("span.child:first-child").css("fontSize","50px"); //5匹配每个父元素的第一个子元素 $("span.child:last-child").css("fontSize","50px"); }) </script> <body> <div class="parent"> <span class="child">1</span> <span class="child">2</span> <span class="child">3</span> <span class="child">4</span> <span class="child">5</span> </div> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492873 joue