こんにちは、ライターのマサトです！
今回は、HTML要素の順番（インデックス番号）を指定することで要素を取得できる「eq()」について学習をしていきます！
この記事では、
・「eq()」とは？
・「eq()」の使い方
という基本的な内容から、
・セレクタの活用
・複数要素の扱い方
などの応用的な使い方に関しても解説していきます。
この記事で、「eq()」をしっかり学習して自分のスキルアップを目指しましょう！
「eq()」とは？
それでは、まず最初に「eq()」の基本的な知識から身に付けていきましょう！
「eq()」は、複数のHTML要素の中からインデックス番号を指定することで特定の要素だけを取得できます。
例えば、次のようなHTMLがあるとします。
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>メロン</li>
<li>イチゴ</li>
</ul>
リスト要素が複数並んでいますよね。
このリストの中で、一番上にある要素「リンゴ」がインデックス番号で言うと0番目になります。
なので、一番下にある「イチゴ」はインデックス番号が3番目ということになりまます。
そこで、例えば上から2つ目の要素だけを取得したいようなケースで「eq()」は役に立ちます。
jQueryで複雑な条件式を記述する必要もないので、コードの効率化にも繋がるわけです。
「eq()」の使い方
この章では、「eq()」の基本的な使い方について学習していきましょう！
一般的な構文から実際のHTML要素を取得する方法や「負の値」を使った手法も学びます。
基本的な構文と書き方について
まずは、「eq()」を活用するために基本的な構文から見ていきましょう！
と、言っても使い方は非常に簡単で対象となるHTML要素に対して「eq()」を実行するだけです。
HTML要素.eq( インデックス番号 )
eq()の引数には、取得したいインデックス番号を数値で記述すればOKです。
ポイントは、HTML要素のインデックス番号は０番目から始まるという点です！
この点だけ忘れないように注意しながら、目的のHTML要素を指定するようにしましょう。
インデックス番号からHTML要素を取得する方法
それでは、実際に「eq()」を使って特定のHTML要素を取得してみましょう！
冒頭でご紹介した次のリスト要素を使ってみましょう。
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>メロン</li>
<li>イチゴ</li>
</ul>
この中で、上から2番目のリスト要素を取得するには次のように記述します。
var r = $('li').eq(1).text();
console.log( r );
実行結果
バナナ
対象となるHTML要素を「$(‘li’)」のように指定することで、リスト要素全体を指定することになります。
そして、このリスト要素の中から「eq(1)」と記述することで上から2番目の要素を取得します。
HTML要素は0番目から数えるので「eq(2)」と記述しない点に注意しておきましょう。
負の値で要素を最後から数える方法
「eq()」の引数に指定するインデックス番号は、「負の値（マイナス値）」を利用することも可能です。
「負の値」にすると、HTML要素を最後から数えることができるのです。
例えば、先ほどのリスト要素を見てみましょう。
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>メロン</li>
<li>イチゴ</li>
</ul>
この中で、一番下にある最後のHTML要素は「イチゴ」ですよね？
これを「eq()」で指定するには次のように記述します。
var r = $('li').eq(-1).text();
「eq()」の引数に負の値を設定している点に注目してください。
「-1」はリストの一番最後の要素を意味しています。（「-2」だと下から2番目になります）
このように、正の値・負の値を使い分けることで効率よくHTML要素を取得できるようになります。
セレクタの活用
この章では、jQueryのセレクタ指定における「eq()」の活用法について解説していきます。
これまでのメソッドとしての使い方とどのように違うのかを意識しながら学習してみてください。
セレクタにeq()を使う方法
「eq()」は、メソッドのように使うだけでなく「セレクタ」として利用することも可能なので解説しておきます。
セレクタは特定のHTML要素を指定する時に使うわけですが、「eq()」を合わせて記述することでさらに効率よく指定できます。
例えば、次のようなHTMLがあるとします。
<div>項目１</div> <div>項目２</div> <div>項目３</div> <div>項目４</div>
div要素で囲まれた４つのHTML要素がありますね。
この時に、３つ目の要素をセレクタ指定してみましょう。
var r = $('div:eq(2)').text();
console.log( r );
実行結果
項目３
セレクタ部分に注目してください！
「$(‘div:eq(2)’)」のように、「：」を記述したあとにeq()を指定すれば良いわけです。
実行結果を見ると３つ目の要素である「項目３」が出力されているのが分かりますね。
メソッドとしてのeq()と指定方法は異なりますが、実現できることは同じなので両方のやり方に慣れておくようにしましょう！
複数要素の扱い方
この章では、eq()を使って複数のHTML要素を取得する例について見ていきましょう！
最も基本的な「for文」を使った繰り返し処理の手法について学んでいきます。
for文を使った複数要素の取得について
「eq()」は複数のHTML要素の中から特定の要素を取得するのに向いてますが、使い方によっては複数取得することも可能です。
サンプル例として、次のようなHTMLを用意しました。
<p>太郎</p> <p>裕太</p> <p>花子</p> <p>大介</p>
p要素で囲まれた文字列が４つあります。
この文字列を「eq()」を使ってすべて取得するには次のように記述します。
var length = $('p').length;
for( var i=0; i<length; i++) {
var r = $('p').eq(i).text();
console.log('私の名前は、' + r + 'です。');
}
実行結果
私の名前は、太郎です。 私の名前は、裕太です。 私の名前は、花子です。 私の名前は、大介です。
まず、「length」を使ってp要素の数を取得します。
この数を元にしてfor文の繰り返し処理を作成し、「eq(i)」と記述すれば順番にp要素がすべて取得できるわけです。
今回のサンプル例では、取得したあとに任意の文字列を追記してコンソールに出力しているのが分かりますね。
まとめ
今回は、HTML要素のインデックス番号を利用して要素を取得できる「eq()」について学習しました！
最後に、もう一度ポイントをおさらいしておきましょう！
・HTML要素のインデックス番号は０番目から始まる
・eq()はメソッドとしての利用と、セレクタとしての利用ができる
・for文を活用することで複数のHTML要素を取得することもできる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
