・複数要素の扱い方などの応用的な使い方に関しても解説していきます。まとめ「eq()」とは?それでは、まず最初に「eq()」の基本的な知識から身に付けていきましょう!「eq()」は、複数のHTML要素の中からインデックス番号を指定することで特定の要素だけを取得できます。次のようなHTMLがあるとします。<li>イチゴ</li></ul>リスト要素が複数並んでいますよね。このリストの中で、一番上にある要素「リンゴ」がインデックス番号で言うと0番目になります。下にある「イチゴ」はインデックス番号が3番目ということになりまます。そこで、例えば上から2つ目の要素だけを取得したいようなケースで「eq()」は役に立ちます。jQueryで複雑な条件式を記述する必要もないので、コードの効率化にも繋がるわけです。「eq()」の使い方この章では、「eq()」の基本的な使い方について学習していきましょう!一般的な構文から実際のHTML要素を取得する方法や「負の値」を使った手法も学びます。基本的な構文と書き方についてまずは、「eq()」を活用するために基本的な構文から見ていきましょう!と、言っても使い方は非常に簡単で対象となるHTML要素に対して「eq()」を実行するだけです。)eq()の引数には、取得したいインデックス番号を数値で記述すればOKです。ポイントは、HTML要素のインデックス番号は0番目から始まるという点です!この点だけ忘れないように注意しながら、目的のHTML要素を指定するようにしましょう。インデックス番号からHTML要素を取得する方法それでは、実際に「eq()」を使って特定のHTML要素を取得してみましょう!冒頭でご紹介した次のリスト要素を使ってみましょう。<li>イチゴ</li></ul>この中で、上から2番目のリスト要素を取得するには次のように記述します。);実行結果バナナ対象となるHTML要素を「$('li')」のように指定することで、リスト要素全体を指定することになります。このリスト要素の中から「eq(1)」と記述することで上から2番目の要素を取得します。HTML要素は0番目から数えるので「eq(2)」と記述しない点に注意しておきましょう。「eq()」の引数に指定するインデックス番号は、「負の値(マイナス値)」を利用することも可能です。「負の値」にすると、HTML要素を最後から数えることができるのです。先ほどのリスト要素を見てみましょう。<li>イチゴ</li></ul>この中で、一番下にある最後のHTML要素は「イチゴ」ですよね?これを「eq()」で指定するには次のように記述します。$('li').eq(-1).text();「eq()」の引数に負の値を設定している点に注目してください。「-1」はリストの一番最後の要素を意味しています。(「-2」だと下から2番目になります)このように、正の値・負の値を使い分けることで効率よくHTML要素を取得できるようになります。セレクタの活用この章では、jQueryのセレクタ指定における「eq()」の活用法について解説していきます。これまでのメソッドとしての使い方とどのように違うのかを意識しながら学習してみてください。「eq()」は、メソッドのように使うだけでなく「セレクタ」として利用することも可能なので解説しておきます。セレクタは特定のHTML要素を指定する時に使うわけですが、「eq()」を合わせて記述することでさらに効率よく指定できます。次のようなHTMLがあるとします。<div>項目1</div><div>項目2</div><div>項目3</div><div>項目4</div>div要素で囲まれた4つのHTML要素がありますね。この時に、3つ目の要素をセレクタ指定してみましょう。項目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()」を使ってすべて取得するには次のように記述します。私の名前は、太郎です。私の名前は、裕太です。私の名前は、花子です。私の名前は、大介です。「length」を使ってp要素の数を取得します。この数を元にしてfor文の繰り返し処理を作成し、「eq(i)」と記述すれば順番にp要素がすべて取得できるわけです。今回のサンプル例では、取得したあとに任意の文字列を追記してコンソールに出力しているのが分かりますね。まとめ今回は、HTML要素のインデックス番号を利用して要素を取得できる「eq()」について学習しました!最後に、もう一度ポイントをおさらいしておきましょう!・HTML要素のインデックス番号は0番目から始まる・eq()はメソッドとしての利用と、セレクタとしての利用ができる・for文を活用することで複数のHTML要素を取得することもできる上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。