【jQuery】last()を使って最後の要素を取得する!

最後の要素を取得するにはjQueryのlast()を使用します。

jQueryのlast()とは指定した要素の最後の要素を取得するメソッドとなります。

また、最後の要素は擬似クラスの:lastでも取得ですることはできますが、jQueryで最後の要素を取得するメソッドはlast()になりますので、jQueryで指定要素の最後の要素を取得する場合はlast()を使用するようにしましょう。

今回は、jQueryのlast()を使って最後の要素を取得する方法について以下の内容で解説していきます。

ハルトさん

今回はjQueryのlast()で最後の要素を取得する方法について説明していきます。

さとみさん

はい!
お願いします!

last()とは

last()とは指定した要素の最後の要素を取得するメソッドとなります。

last()の書き方

last()の書き方は下記となります。

$の()にセレクタを指定し、last()を呼び出すことで、セレクタの最後の要素を取得することができます。

最後の要素を取得するサンプルコード

last()で最後の要素を取得するサンプルコードを紹介します。

sample.html

index.js

出力結果

last()で最後の要素を取得することができます。
そのため、ボタンを押すと、trタグ要素の最後の要素であるthタグ要素の背景色が変化しています。

last()と:lastで最後に一致した要素だけを取得する

last()と:lastで最後に一致した要素だけを取得する方法についても紹介してみます。

sample.html

index.js

出力結果

セレクタに:lastの擬似クラスを指定することでセレクタの最後の要素を取得しています。
また、last()を使用することでセレクタの最後の要素を取得しています。

今回のポイント

last()で最後の要素を取得

⚫︎ 最後の要素を取得するにはjQueryのlast()を使用する

⚫︎ 擬似クラスの:lastを使っても最後の要素を取得することができる

関連記事

jQueryのfirst()で最初の要素を取得する方法についてはこちらをご参考ください。

Writer
壷井

壷井

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

最新の案件情報

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