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

この記事の例では、jQuery での :nth-child セレクターの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このセレクターは、親要素の下にある N 番目の子要素または奇数偶数要素と一致します。
:eq(index) セレクターは 1 つの要素のみに一致しますが、:nth-child セレクターはすべての親要素の子要素に一致します。
:nth-child は 1 から始まり、:eq() は 0 から始まります。
文法構造:

コードをコピーします コードは次のとおりです:

$(":nth-child")

このセレクターは通常、クラス セレクター、要素セレクターなどの他のセレクターと組み合わせて使用​​されます。例:

コードをコピー コードは次のとおりです:

$("li:nth-child(2)").css ("色","青")

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

コードをコピー コードは次のとおりです:

$("li:nth-child(even)").css ("色","青")

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

注: 上記のコードと組み合わせて概念を説明する必要があります。ここで言う親要素は li ではなく、li の親要素です。
li 要素の子要素の最後の要素と一致すると勘違いしている人がよくいます。

コード例:

コードをコピーします コードは次のとおりです:

$(document).ready(function(){
$("ボタン").click(function(){
$("li:nth-child(2)").css("color","blue")
})
})

• ASP チュートリアル


• ASP.NET チュートリアル


• ;PHP チュートリアル

• html チュートリアル


• DIV CSS チュートリアル


• jQUERY チュートリアル


• jAVAScript チュートリアル

クリックして効果を確認してください