jQueryで最後の要素を取得するには？

Webページの開発において、JavaScriptライブラリであるjQueryは、その簡潔な構文と豊富な機能で、DOM操作を容易にする強力なツールです。特に、要素の取得と操作は、Webページの動的な動作を実現する上で欠かせない要素です。

本記事では、jQueryを用いて、複数の要素の中から最後の要素を取得する方法について解説します。具体的には、:lastセレクタを用いた方法を紹介します。

:last セレクタとは？

:lastセレクタは、特定のセレクタに一致する要素群の中から、最後の要素のみを選択します。リストの最後の項目や、テーブルの最後の行など、様々な場面で活用できます。

:lastセレクタは、他のセレクタと組み合わせて使用します。基本的な構文は以下の通りです。

$("セレクタ:last")

例えば、ul要素内の最後のli要素を取得したい場合は、次のように記述します。

$("ul li:last")

具体的な使用例として、リストの最後の項目の文字色を赤に変更する例を見てみましょう。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

$(document).ready(function() {
  $("ul li:last").css("color", "red");
});

上記のコードを実行すると、リストの最後の項目("項目3")の文字色が赤に変更されます。

:lastセレクタは、他のセレクタと組み合わせて、より複雑な条件で要素を選択することができます。例えば、特定のクラスを持つ要素の中から最後の要素を取得したい場合は、次のように記述します。

$(".target-class:last")

組み合わせ	説明
`$("li:last-child")`	親要素内の最後のli要素を選択
`$("tr:last").find("td")`	テーブルの最後の行にある全てのセルを選択

本記事では、jQueryを用いて最後の要素を取得する方法として、:lastセレクタを紹介しました。このセレクタを活用することで、HTMLの構造を意識せずに、柔軟に要素を取得することができます。