【jQuery】:last-childを使って最後の子要素を指定する!

最後の子要素を指定するにはjQueryの:last-childを使用します。

jQueryの:last-childとは最後の子要素を指定するものであり、子要素の一番上の子要素を指定することができます。

最後の子要素は:only-childやchildren()メソッドなどでも取得できますが、条件を指定しないといませんので少し面倒です。
しかし、:last-childだと最後の子要素をすぐに指定できるので最後の子要素を指定する場合は:last-childを使用した方が便利です。

:last-child

今回は、jQueryの:last-childを使って最後の子要素を指定する方法について以下の内容で解説していきます。

⚫︎ セレクタを指定して最後の子要素を指定する場合
⚫︎ セレクタを指定せずに最後の要素を指定する場合

⚫︎ jQueryを使用せずに最後の子要素を指定する場合
⚫︎ :only-childやchildren()で最後の子要素を指定する場合

ハルトさん

今回はjQueryの:last-childで最後の子要素を指定する方法について説明していきます。

さとみさん

はい!
お願いします!

:last-childとは

:last-childとはセレクタの最後の子要素を指定することができます。

:last-childの書き方

:last-childの書き方は下記となります。

$の()に要素:last-childを指定することで、セレクタの最後の子要素を指定することができます。

最後の子要素を指定するサンプルコード

:last-childで最後の子要素だけを指定するサンプルコードを紹介します。

セレクタを指定して最後の子要素を指定する場合

セレクタを指定して最後の子要素を指定してみます。

sample.html

index.js

出力結果

:last-childで最後の子要素を指定することができます。
そのため、ボタンを押すと、trタグ要素の最後の子要素であるthタグ要素の背景色が変化しています。

セレクタを指定せずに最後の子要素を指定する場合

セレクタを指定せずに最後の子要素を指定してみます。

sample.html

index.js

出力結果

:last-childでセレクタを指定せずに最後の要素を指定する場合はどの要素の子要素を取得するのか特定できません。
そのため、ボタンを押すと、全要素の背景色が変化します。

jQueryを使用せずに最後の子要素を指定する場合

jQueryを使用せず、純粋なJavaScriptで最後の子要素を指定してみます。

sample.html

index.js

出力結果

thタグ要素の背景色が変わったことから、jQueryを使用せずJavaScriptで最後の子要素を指定しています。

さとみさん

jQueryを使わず同じことを実行させようとすると、とてもコードが長くなるんですね!
これだとjQueryの方がとても便利です!

ハルトさん

そうですよね。
コードの量や分かりやすさを比較するとあきらかにjQueryの方が良いですよね。

:only-childやchildren()で最後の子要素を指定する場合

:only-childやchildren()で最後の子要素を指定する場合を見てみます。

sample.html

index.js

出力結果

:only-childやchildren()で最後の子要素を指定することはできますが、find()やセレクタ指定など条件を加える必要があります。

さとみさん

:only-childやchildren()で最後の子要素を指定することはできますけど、find()やセレクタの指定をしないといけないので少し手間がかかりますね!
これだと:last-childを使った方が便利です!

ハルトさん

そうですね。
最後の子要素を指定するならあきらかに:last-childの方が良いですよね。

今回のポイント

:last-childで最後の子要素を指定

⚫︎ 最後の子要素を指定するにはjQueryの:last-childを使用する

⚫︎ 最後の子要素を指定するには$()の中に「$要素:last-child」を指定する

⚫︎ セレクタを指定せずに最後の子要素を指定すると最後の子要素を認識できず、全体の要素を取得する

⚫︎ :only-childやchildren()で最後の子要素を指定することはできるが、:last-childの方が楽に指定できる

関連記事

jQueryの:first-childで最初の子要素を指定する方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し