jQuery子要素フィルター

名前	説明	例
:nth-child(index/even/odd/equation)	は、親要素の下にあるN番目の子要素または奇数-偶数要素と一致します ' : eq(index)' は 1 つの要素のみに一致しますが、これはすべての親要素の子要素に一致します。 :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' は 1 つの要素のみに一致し、このセレクターは各親要素に対して 1 つの子要素に一致します	各 ul の最初の li を検索します: $("ul li:first-child ")
:last-child	は最後の子要素と一致します ':last' は 1 つの要素のみと一致しますが、このセレクターは各親要素に対して 1 つの子要素と一致します	in 各 ul の最後の li を検索します。 $("ul li:last-child")
:only-child	要素が親要素内の唯一の子要素である場合、その要素が一致します親要素に他の要素が含まれている場合、一致しません。	ulの唯一の子要素であるliを検索します: $("ul li:only-child")

注:

1. :nth-child(index) は 1 から始まり、eq(index) は 0、つまり $("ul li:nth-child(0)") から始まります。 "color","red") は一致する要素を取得できず、1 からのみ開始できます。つまり、$("ul li:nth-child(1)").css("color","red" )、および eq( 0) を取得できます。同様に最初の子要素を取得します :nth-child(even) は偶数番目の子要素、つまり 2 番目、4 番目、6 番目... を取得します。そして :evenインデックス 0 から始まり、2 番目のインデックス、4 番目のインデックスと一致します...つまり、1 番目、3 番目、5 番目...、それらはすべて奇数のアイテムを取得するようです。同じことが :nth-child (odd) にも当てはまります) と :odd

2。:first-child は各親クラスの子要素に一致しますが、:first は子要素に一致し、同じことが :last-child と last

3 にも当てはまります。要素は親要素内の唯一の子要素です。つまり、現在の子要素がクラス内の唯一の要素である場合、それは一致します。

りー

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転