jQuery｢.eq()｣で順番指定で要素を取得する方法

2020年7月17日

jQueryの「.eq()」は、順番指定で要素を取得する事ができるメソッド

今回は、jQueryの「.eq()」について、その使い方をサンプルを交えて解説しよう。

.eq()の機能とは？

.eq()の機能

.eq()は、「0から始まる順番指定で要素を取得する」事ができる。

.eq()で指定する「順番」とは、セレクタで指定した要素において、HTML全体の中における（0から始まる）順番で指定する事ができる。

また数字に「負の数」を入れる事で、後ろから数えた順番も指定できる。

.eq()の構文

.eq()の構文は次のような記述となる

$("セレクタ").eq(順番);

この「順番」の指定は0から始まる整数であり、前述したように「負の整数」も指定できる。

また.eq()は次のように記述する事で「セレクタ」としても記述する事もできる。

$("li:eq(2)")

ただしこの記述の場合、前述した通常の記述よりはパフォーマンス的に若干重くなるらしいので、特別な理由が無い限りは通常の記述のほうが良いだろう。

.eq()の使用例

たとえば次のようなHTMLがあったとする

HTML

<ul class="nav">
  <li>0：りんご</li>
  <li>1：みかん</li>
  <li>2：いちご</li>
  <li>3：もも</li>
</ul>

jQuery

$(function(){
  $(".nav li").eq(2).css("color","red");
});

この例では、.nav liに対して.eq(2)と順番を指定する事で、.nav内のliで0から始まる順番という事で「2：いちご」の文字色が赤に変わる事になる。

負の数字を入れた場合

上記と同じHTMLで負の数字をいれた場合を見ていこう。

jQuery

$(function(){
  $(".nav li").eq(-1).css("color","red");
});

この場合「-1」と指定する事で、後ろから数えて1番目の「3：もも」の文字色が赤に変わる。負の数字の場合は0からではなく-1から始まる点に注意が必要だ。

セレクタの指定が広い場合

HTML

<ul class="nav">
  <li>0：りんご</li>
  <li>1：みかん</li>
  <li>2：いちご</li>
  <li>3：もも</li>
</ul>
<ul>
  <li>4：ぶどう</li>
  <li>5：メロン</li>
  <li>6：梨</li>
</ul>

jQuery

$(function(){
  $("li").eq(5).css("color","red");
});

上記のようにセレクタで親要素を指定せずに$("li")とした場合eq()では、親要素を区別せずに順番がカウントされるので、この場合HTML全体からみた「li」の順番となり「5：メロン」の文字の色が赤になる。

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント