【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」は複数の親要素ごとに一番最後の要素を取得可能

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説