JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

lengthプロパティを使わずにノードリストから最後の要素を取得する方法【jQueryの:lastセレクタ】

JavaScriptでノードリストやDOM要素のコレクションから最後のアイテムを取得する場合、一般的には length プロパティで要素数を調べてインデックスを指定します。しかし、jQueryの :last セレクタを使えば、要素数を意識することなく、よりシンプルに最後の要素を取得できます。

サンプルとなるテーブル

ここでは、次のようなHTMLテーブルを例に説明します。

<table id="demo" border="1">
<tr>
<td>John</td>
</tr>
<tr>
<td>David</td>
</tr>
<tr>
<td>Mike</td>
</tr>
</table>

最後のアイテムを取得する方法

最後の行のセル（td）を取得するには、table tr:last td というセレクタを使用します。text() メソッドと組み合わせることで、そのセル内のテキスト値をそのまま取り出すことができます。

$('table tr:last td')

:last はjQuery独自のフィルタセレクタで、マッチした要素群の中から「最後の要素」だけを選択します。このため、length プロパティで要素数を数える処理が不要になり、コードが簡潔になります。

完全なコード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table id="demo" border="1">
<tr>
<td>John</td>
</tr>
<tr>
<td>David</td>
</tr>
<tr>
<td>Mike</td>
</tr>
</table>
<script>
    var lastValue = $('table tr:last td').text();
    console.log("The last value is=" + lastValue);
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html（index.html）」などの任意の名前で保存し、VS Codeエディター上でそのファイルを右クリックして「Open with Live Server」を選択してください。

出力結果

このプログラムを実行すると、ブラウザのコンソールにはテーブルの最後のセルの値である「Mike」が出力されます。

lengthプロパティを使わずにノードリストから最後の要素を取得する方法【jQueryの:lastセレクタ】

補足：jQueryを使わない場合の代替方法

ライブラリに依存せず、素のJavaScriptだけで同じことを実現したい場合は、CSSセレクタの :last-child を querySelector() と組み合わせる方法もあります。

var lastValue = document.querySelector('#demo tr:last-child td').textContent;
console.log("The last value is=" + lastValue);

このように状況に応じてjQueryの :last セレクタと標準のセレクタAPIを使い分けることで、どちらの場合でも length プロパティを使わずに最後の要素を効率的に取得できます。

  1. JavaScriptでURLからGETパラメータの値を取得する方法

    JavaScriptでは、URLオブジェクトとsearchParamsプロパティを組み合わせることで、URLに含まれるGETパラメータ（クエリ文字列）の値を簡単に取得できます。本記事では、実際のコード例とともにその手順をわかりやすく解説します。 実装例 以下は、サンプルURL「https://www.google.com?imageSize=440&color=blue」から、imageSizeとcolorという2つのGETパラメータの値を取り出して画面に表示するコード例です。 <!DOCTYPE html> <html lang=ja> <head>

  2. JavaScriptで親要素の子要素を取得する方法【サンプルコード付き】

    JavaScriptでは、親要素が持つchildrenプロパティを参照することで、その直下にある子要素をまとめて取得できます。本記事では、実際に動作するサンプルコードを使いながら、具体的な手順をわかりやすく解説します。 サンプルコード 以下は、JavaScriptを使って親要素（parent1）の子要素を取得し、ボタンのクリックで一括表示させる例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta nam