jQuery :nth-child セレクターの使用例

概要

親要素の下にある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) 2 番目の li を検索します

HTML コード:

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

jQuery コード:

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

結果:

[ <li>Karl</li>, <li>Tane</li> ]

このセレクターは、親要素の下にある N 番目の子要素または奇数偶数要素と一致します。 。

:eq(index) セレクターは 1 つの要素のみに一致しますが、:nth-child セレクターはすべての親要素の子要素に一致します。

:nth-child は 1 から始まりますが、:eq() は 0 から始まります。

文法構造:

$(":nth-child")

このセレクターは通常、

クラスセレクター
、

要素セレクター

などの他のセレクターと組み合わせて使用​​されます。例:

$("li:nth-child(2)").css("color","blue")

上記のコードは、親要素の下にある 2 番目の li 要素のフォントの色を青に設定できます。親要素の奇数および偶数の子要素を計算することもできます。例:

$("li:nth-child(even)").css("color","blue")

上記のコードは、親要素の下にある偶数番号の li 要素のフォントの色を青に設定できます。

注: 上記のコードと組み合わせて概念を説明する必要があります。ここで言う親要素は li ではなく、li の親要素です。 多くの人は、li 要素に一致する子要素の最後の要素であると誤って考えることがよくあります。 サンプルコード:

  

    
ASP教程
    
ASP.NET教程
    
;PHP教程
  
  

    
html教程
    
DIV+CSS教程
    
jQUERY教程
    
jAVAScript教程
  

点击查看效果

以上がjQuery :nth-child セレクターの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。