スライドショー

【jQuery入門】eq()の使い方とインデックス番号の活用法!

こんにちは、ライターのマサトです!

今回は、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要素のインデックス番号は0番目から始まるという点です!

この点だけ忘れないように注意しながら、目的の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>項目1</div>
<div>項目2</div>
<div>項目3</div>
<div>項目4</div>

div要素で囲まれた4つのHTML要素がありますね。

この時に、3つ目の要素をセレクタ指定してみましょう。

var r = $('div:eq(2)').text();

console.log( r );

実行結果

項目3

セレクタ部分に注目してください!

「$('div:eq(2)')」のように、「:」を記述したあとにeq()を指定すれば良いわけです。

実行結果を見ると3つ目の要素である「項目3」が出力されているのが分かりますね。

メソッドとしてのeq()と指定方法は異なりますが、実現できることは同じなので両方のやり方に慣れておくようにしましょう!

複数要素の扱い方

この章では、eq()を使って複数のHTML要素を取得する例について見ていきましょう!

最も基本的な「for文」を使った繰り返し処理の手法について学んでいきます。

for文を使った複数要素の取得について

「eq()」は複数のHTML要素の中から特定の要素を取得するのに向いてますが、使い方によっては複数取得することも可能です。

サンプル例として、次のようなHTMLを用意しました。

<p>太郎</p>
<p>裕太</p>
<p>花子</p>
<p>大介</p>

p要素で囲まれた文字列が4つあります。

この文字列を「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要素のインデックス番号は0番目から始まる
・eq()はメソッドとしての利用と、セレクタとしての利用ができる
・for文を活用することで複数のHTML要素を取得することもできる

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。