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

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

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

この記事では、

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

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

「last」とは？

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

<ul>
    <li>サンプル１</li>
    <li>サンプル２</li>
    <li>サンプル３</li>
    <li>サンプル４</li>
</ul>

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

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

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

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

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

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

$("HTML要素:last")

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

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

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

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

<ul>
    <li>サンプル１</li>
    <li>サンプル２</li>
    <li>サンプル３</li>
    <li>サンプル４</li>
</ul>

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

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

console.log(result);

実行結果

サンプル４

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

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

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

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

<ul id="main">
      <li>サンプル１</li>
      <li>サンプル２</li>
      <li>サンプル３</li>
      <li>サンプル４</li>
</ul>
<ul id="sub">
      <li>サンプル５</li>
      <li>サンプル６</li>
      <li>サンプル７</li>
      <li>サンプル８</li>
</ul>

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

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

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

console.log(result);

実行結果

サンプル４サンプル８

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

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

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

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

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

HTML要素.last();

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

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

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

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

<ul>
      <li>サンプル１</li>
      <li>サンプル２</li>
      <li>サンプル３</li>
      <li>サンプル４</li>
</ul>

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

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

console.log(result);

実行結果

サンプル４

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

「last」の活用

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

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

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

<ul>
      <li>サンプル１</li>
      <li class="test">サンプル２</li>
      <li>サンプル３</li>
      <li class="test">サンプル４</li>
</ul>
<ul>
      <li class="test">サンプル１</li>
      <li>サンプル２</li>
      <li class="test">サンプル３</li>
      <li>サンプル４</li>
</ul>

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

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

console.log(result);

実行結果

サンプル３

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

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

まとめ

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

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