【jQuery入門】「:last」や「last()」を使って最後の要素を取得する方法!

こんにちは、ライターのマサトです!

今回は、jQueryから任意のHTML要素で一番最後の要素だけを取得できる「last」について学習していきましょう!

この記事では、

  • 「last」とは?
  • セレクタによる「last」の使い方

という基本的な内容から、

  • メソッドによる「last」の使い方
  • 「last」の活用

などの応用的な使い方に関しても解説していきます。この記事で、「last」をしっかり学習して自分のスキルアップを目指しましょう!

目次

「last」とは?

まず最初に、「last」について基本的な知識から身に付けていきましょう! 「last」は、複数の同じHTML要素の中から一番最後の要素だけを取得できる機能を持っています。例えば、次のようなリスト要素を考えてください!

<ul>
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
    <li>サンプル4</li>
</ul>

「liタグ」が4つ並んで配置されていますが、この中から一番最後に配置されている要素を取得したいとします。それはつまり「サンプル4」というテキストが表示されたリスト要素ということになります。このようなケースで「last」は役に立つわけです。

ちなみに、「last」はメソッドとしても使えますがセレクタ指定でも利用できる2面性を持っています。本記事では、2種類の「last」を使い分けられるように解説をしていきますので、ぜひ参考にしてみてください!

セレクタによる「last」の使い方

この章では、セレクタ指定において利用できる「last」の使い方について見ていきましょう! 一般的な構文や書き方から実際のプログラミング手法について学んでいきます。

基本的な構文と書き方について

まずは、基本となる構文から見ていきいましょう! 通常のjQueryで利用するセレクタ指定に続けて「:(コロン)」を挿入してから「last」を記述するのが基本です。

$("HTML要素:last")

※「last」は単独で使用することはありません

このように、通常通り対象となるHTML要素を文字列で指定する際に、「:」を付与して「last」を記述します。すると、対象のHTML要素が複数ある場合に一番最後の要素だけが取得できるようになるわけです。「:last」のように単独で指定することはできないので注意しましょう。

セレクタ指定で最後の要素を取得する方法

それでは、実際にセレクタで「last」を使ったプログラミングを行ってみましょう! 冒頭でも紹介した次のリスト要素を見てください。

<ul>
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
    <li>サンプル4</li>
</ul>

このリスト要素(liタグ)の中から一番最後に配置されている要素だけを取得してみましょう! そこで、次のように記述します。

var result = $('li:last').text();

console.log(result);

実行結果

サンプル4

「$(‘li:last’)」と記述することで、リスト要素の一番最後を取得するという意味になります。あとは、その要素のテキスト文字を取得するため「text()」を実行しています。実行結果を見ると、一番最後のテキストだけが出力できているのが分かりますね。

「last-child」で最後の要素を取得する方法

jQueryには「last」とよく似たセレクタ指定ができる「last-child」があるので合わせてご紹介しておきます! 「last-child」も一番最後に配置されている要素を取得するのですが、複数のリスト要素がある場合に活躍します。

例えば、次のようなリスト要素があるとします。

<ul id="main">
      <li>サンプル1</li>
      <li>サンプル2</li>
      <li>サンプル3</li>
      <li>サンプル4</li>
</ul>
<ul id="sub">
      <li>サンプル5</li>
      <li>サンプル6</li>
      <li>サンプル7</li>
      <li>サンプル8</li>
</ul>

この例では、2つのリスト要素が配置されています。「last」を使うと取得するのは一番最後の「サンプル8」のリスト要素になりますよね?しかし「last-child」を使うと、「サンプル4」「サンプル8」2つのリスト要素を取得できるのです。

つまり、親要素の違うそれぞれのリスト要素の一番最後の要素をまとめて取得できるというわけです! 使い方は次のようになります。

var result = $('li:last-child').text();

console.log(result);

実行結果

サンプル4サンプル8

これまで使ってきた「last」を「last-child」に置き換えるだけなので簡単ですね。

メソッドによる「last」の使い方

この章では、メソッドとしての「last」による使い方を見ていきましょう! 一般的な構文から実際のプログラミング手法について学んでいきます。

基本的な構文と書き方について

まずは、基本となる構文から見ていきましょう! 前章のセレクタ指定とは違い、あくまでメソッドとして対象要素に指定するのがポイントです。

HTML要素.last();

※対象となるHTML要素を指定します

一番最後の要素を取得したいHTML要素に続けて「last()」を実行すればOKです! 引数によるオプション指定などはありません。また、戻り値としては取得した一番最後の要素を返します。

メソッドで最後の要素を取得する方法

それでは、実際に「last()」を使ったプログラミングを行ってみましょう! サンプルとして、次のようなリスト要素を用意します。

<ul>
      <li>サンプル1</li>
      <li>サンプル2</li>
      <li>サンプル3</li>
      <li>サンプル4</li>
</ul>

このリスト要素にある一番最後の要素を取得するには、次のように記述します!

var result = $('li').last().text();

console.log(result);

実行結果

サンプル4

この例では、リスト要素に対して「last()」を実行しているのが分かりますね。さらにチェーンを繋いで「text()」を実行することで、一番最後の要素に含まれるテキストを取得しています。実行結果を見ると最後の要素が取得できているのが分かりますね。

「last」の活用

この章では、「last」を使う上で知っておくと便利なことをご紹介しておきます。主に、HTML要素に含まれているclassを使った範囲検索について学んでいきます。

classやidを活用した要素の取得について

これまでは、対象となるリスト要素に対して「last」を使ってきました。しかし、「last」はセレクタ指定に対して実行されるので、例えばclass / id属性を活用することもできます例えば、次のようなHTMLがあるとします。

<ul>
      <li>サンプル1</li>
      <li class="test">サンプル2</li>
      <li>サンプル3</li>
      <li class="test">サンプル4</li>
</ul>
<ul>
      <li class="test">サンプル1</li>
      <li>サンプル2</li>
      <li class="test">サンプル3</li>
      <li>サンプル4</li>
</ul>

この例では、一部のリスト要素に同じclass属性が付与されているのが分かりますね。そこで、リスト要素全体ではなくclass属性が付与されているリスト要素の一番最後を取得してみましょう!

var result = $('.test').last().text();

console.log(result);

実行結果

サンプル3

この例では、セレクタ指定に注目してください。リスト要素ではなくclass属性をセレクタ指定し、そこに「last()」を実行していますよね。これにより、class属性を持つリスト要素の一番最後を取得できるというわけです。

もちろんセレクタ指定による「:last」も利用可能です。

まとめ

今回は、特定のHTML要素の一番最後に配置されている要素を取得できる「last」について学習しました! 最後に、もう一度ポイントをおさらいしておきましょう!

  • セレクタ指定の場合は「:last」を記述することで最後の要素を取得可能
  • メソッドで実行する場合は「last()」を記述して最後の要素を取得可能
  • 「last-child」は複数の親要素ごとに一番最後の要素を取得可能

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次