jQuery セレクター: last-child の使用方法の詳細な説明

黄舟
リリース: 2017-06-23 14:44:06
オリジナル
1524 人が閲覧しました

概要

最後の子要素と一致します

':last'は1つの要素のみと一致しますが、このセレクターは各親要素に対して1つの子要素と一致します

説明:

各ul A 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:last-child")
ログイン後にコピー

結果:

[ <li>Brandon</li>, <li>Ralph</li> ]
ログイン後にコピー

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

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

$(":last-child")
ログイン後にコピー

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

$("li:last-child").css("color","blue")
ログイン後にコピー

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

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

サンプルコード:











  • ASP教程
  • ASP.NET教程
  • PHP教程
  • html教程
  • DIV+CSS教程
  • jQUERY教程
  • jAVAScript教程
ログイン後にコピー

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート