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：メロン」の文字の色が赤になる。

AI時代にHTML・CSS・Jqueryの学習は不要説

AIの進化に指をくわえて見ているだけでいいのか？

ClaudeやCodexなどのAIの進化のスピードに脅威を感じないだろうか？HTMLやCSSやjQueryなどは、ClaudeやCodexに頼めばほんの１〜２分で完成していまいます。とてもスピードでは太刀打ちできないし、人間がゼロベースからHTMLコーディングをする仕事は、いずれ終焉を迎えるでしょう。では、HTMLコーディングを学ぶ必要は無いのか？

「その答えはNOです。」

コーディングを学ぶ、その理由は？

AIでバイブコーディングをしているプロの方なら分かると思うのですが、AIが出すコードにも調整が必要な事が多々あるという事。例えば「ここはflexを使った方が後々楽になる」とか、「ここはまとめて変数で指定してほしい」など、HTMLを理解した上でAIに具体的に指示する方が圧倒的に速い。さらにちょっとした修正なら、いちいちAIに言葉を考えて説明するより「自分で修正した方が楽な場合がよくある」という事。つまりまとめると、AIにコーディングさせるなら、人間もコーディングを理解している方が圧倒的に良いという事である。

AI時代に、体系的に学ぶコーディング手法

普段ClaudeやCodexを使ってバイブコーディングをしている私が、必要と感じるHTMLの学習を、基礎からみっちり理解しつつも、最新のコーディング手法を学べ、初心者の方がついてイケるように、HTMLの基礎理論から、スマホのためのレスポンシブコーディングまでを、新しいCSSの変数やネスト記法やjQueryを使った開閉メニューの実装やFigmaデータからのコーディングの仕方など、ゼロからひと通りコーディングできるまで体系的に学べる動画講座を作りました。

「動画の無料プレビュー」もあるので、一度覗いてみてください▼