jQuery セレクターの使用の概要: first-child、:nth-child、および :last-child

jQuery:first-childselector の使用例

このセレクターは、親要素の最初の子要素と一致します。

文法構造:

$(":first-child")

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

$("ul li:first-child").css("color","blue")

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

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

コード例:

  

    
ASP教程
    
ASP.NET教程
    
PHP教程
  
  

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

点击查看效果

上記のコードでは、ボタンをクリックすると、各 ul の下の最初の li 要素のテキストの色を青に設定できます。

jQuery の場合: n 番目の子セレクターの使用例

このセレクターは、親要素の下にある 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 の場合: 最後の子セレクターの使用例

このセレクターは、親要素の最後の子要素と一致します。

注: last は 1 つの要素のみを選択し、このセレクターは各親要素の最後の子要素と一致します。
構文構造:

$(":last-child")

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

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

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

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

サンプルコード:

  

    
ASP教程
    
ASP.NET教程
    
PHP教程
  
  

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

点击查看效果

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