「last」の活用などの応用的な使い方に関しても解説していきます。「last」は、複数の同じHTML要素の中から一番最後の要素だけを取得できる機能を持っています。<li>サンプル4</li></ul>「liタグ」が4つ並んで配置されていますが、この中から一番最後に配置されている要素を取得したいとします。それはつまり「サンプル4」というテキストが表示されたリスト要素ということになります。このようなケースで「last」は役に立つわけです。ちなみに、「last」はメソッドとしても使えますがセレクタ指定でも利用できる2面性を持っています。一般的な構文や書き方から実際のプログラミング手法について学んでいきます。通常のjQueryで利用するセレクタ指定に続けて「:(コロン)」を挿入してから「last」を記述するのが基本です。$("HTML要素:last")※「last」は単独で使用することはありませんこのように、通常通り対象となるHTML要素を文字列で指定する際に、「:」を付与して「last」を記述します。すると、対象のHTML要素が複数ある場合に一番最後の要素だけが取得できるようになるわけです。「:last」のように単独で指定することはできないので注意しましょう。冒頭でも紹介した次のリスト要素を見てください。そこで、次のように記述します。$('li:last').text();console.log(result);実行結果サンプル4「$('li:last')」と記述することで、リスト要素の一番最後を取得するという意味になります。あとは、その要素のテキスト文字を取得するため「text()」を実行しています。実行結果を見ると、一番最後のテキストだけが出力できているのが分かりますね。「last-child」も一番最後に配置されている要素を取得するのですが、複数のリスト要素がある場合に活躍します。次のようなリスト要素があるとします。<li>サンプル8</li></ul>この例では、2つのリスト要素が配置されています。「last」を使うと取得するのは一番最後の「サンプル8」のリスト要素になりますよね?しかし「last-child」を使うと、「サンプル4」「サンプル8」2つのリスト要素を取得できるのです。使い方は次のようになります。$('li:last-child').text();console.log(result);実行結果サンプル4サンプル8これまで使ってきた「last」を「last-child」に置き換えるだけなので簡単ですね。一般的な構文から実際のプログラミング手法について学んでいきます。前章のセレクタ指定とは違い、あくまでメソッドとして対象要素に指定するのがポイントです。引数によるオプション指定などはありません。戻り値としては取得した一番最後の要素を返します。サンプルとして、次のようなリスト要素を用意します。$('li').last().text();console.log(result);実行結果サンプル4この例では、リスト要素に対して「last()」を実行しているのが分かりますね。チェーンを繋いで「text()」を実行することで、一番最後の要素に含まれるテキストを取得しています。実行結果を見ると最後の要素が取得できているのが分かりますね。「last」の活用この章では、「last」を使う上で知っておくと便利なことをご紹介しておきます。HTML要素に含まれているclassを使った範囲検索について学んでいきます。classやidを活用した要素の取得についてこれまでは、対象となるリスト要素に対して「last」を使ってきました。id属性を活用することもできます例えば、次のようなHTMLがあるとします。<li>サンプル4</li></ul>この例では、一部のリスト要素に同じclass属性が付与されているのが分かりますね。$('.test').last().text();console.log(result);実行結果サンプル3この例では、セレクタ指定に注目してください。リスト要素ではなくclass属性をセレクタ指定し、そこに「last()」を実行していますよね。これにより、class属性を持つリスト要素の一番最後を取得できるというわけです。セレクタ指定による「:last」も利用可能です。上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。