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

Contents

  1. 「eq（）」の基本的な使い方
  2. 複数の要素を取得する方法

「eq（）」の基本的な使い方

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

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

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

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

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

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

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

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

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

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

<ul>
	<li>ブレンドコーヒー</li>
	<li>カフェラテ</li>
	<li>カプチーノ</li>
	<li>エスプレッソ</li>
</ul>
 var order = $('li').eq(-1).text(); // エスプレッソを指定しています
 console.log(order);

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

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

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

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

$(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」要素を取得しています。

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

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