特定の要素や順番を取得する時に便利なeq()メソッドは、色々な場面で使用できるのでとても便利です。

「eq()」の基本的な使い方

まずは、HTMLの要素の順番を指定して、指定した要素を取得してみます。

次のようなHTMLがあるとします。eq()を使用して、特定の要素を取得する場合、インデックス番号を指定することで取得できます。このリストの一番上の「ブレンドコーヒー」がインデックス番号0番目、「エスプレッソ」がインデックス番号3番目となり、要素のインデックス番号は「0」から始まります。

HTML

<ul>
	<li>ブレンドコーヒー</li>
	<li>カフェラテ</li>
	<li>カプチーノ</li>
	<li>エスプレッソ</li>
</ul>

なので、「カフェラテ」を取得したい場合は下記のように記述します。

jQuery

$('li').eq(1) // 引数にインデックス番号を指定する

ちゃんと取得できているか確認してみます。

jQuery

var order = $('li').eq(1).text(); // 引数にインデックス番号を指定する
console.log(order);

要素を最後から数える方法

インデックス番号をマイナス値で指定すると、要素を最後から数えることができます。

先ほどのHTMLの場合、引数に「-1」を指定すると「エスプレッソ」を取得できます。

HTML

<ul>
	<li>ブレンドコーヒー</li>
	<li>カフェラテ</li>
	<li>カプチーノ</li>
	<li>エスプレッソ</li>
</ul>

jQuery

 var order = $('li').eq(-1).text(); // エスプレッソを指定しています
  console.log(order);

複数の要素を取得する方法

次は、「for文」を使って複数の要素を取得する方法をみてみます。

HTML

<ul>
	<li>ブレンドコーヒー</li>
	<li>カフェラテ</li>
	<li>カプチーノ</li>
	<li>エスプレッソ</li>
</ul>

上記の「li」要素を取得する場合、下記のように記述します。

jQuery

$(function() {
  var length = $('li').length; // lengthを使って「li」要素を取得
  for (var i=0; i<length; i++) {
    var order = $('li').eq(i).text();
    
    console.log('私は' + order + 'ください。');
  }
});

length」を使って「li」要素の数を取得し、「for文」の繰り返し処理で全ての「li」要素を取得しています。

コンソールログには、「私はブレンドコーヒー ~ エスプレッソください。」と全て出力されると思います。

console.log

私はブレンドコーヒーをください。
 私はカフェラテをください。
 私はカプチーノをください。
 私はエスプレッソをください。

以上がHTML要素のインデックス番号を指定して、要素を指定する方法でした。