jQueryで要素のインデックス番号を取得する方法を解説！
複数の要素から特定の要素の順番を取得したい時に役立つjQueryのindex()メソッドの使い方を、実例を交えてわかりやすく解説します。
1. index()の基本的な使い方
index()メソッドは、指定した要素が兄弟要素の中で何番目にあるか（0から始まるインデックス番号）を取得します。
例：
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<script>
$(“li”).click(function(){
var index = $(this).index();
console.log(index);
});
</script>
上記コードでは、クリックされたli要素のインデックス番号がコンソールに表示されます。
2. 特定の要素群の中でのインデックス番号を取得する
引数にセレクタを指定することで、特定の要素群の中でのインデックス番号を取得できます。
例：
<ul>
<li>リスト1</li>
<li class="active">リスト2</li>
<li>リスト3</li>
</ul>
<script>
var index = $(“li.active”).index();
console.log(index); // 出力: 1
</script>
上記コードでは、class="active"を持つli要素の中で、最初に見つかった要素の、全てのli要素の中でのインデックス番号を取得します。
3. 親要素を指定してインデックス番号を取得する
親要素を指定することで、その親要素の直下の要素の中でのインデックス番号を取得できます。
例：
<ul id="parent">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<script>
var index = $(“#parent li”).eq(2).index(“li”);
console.log(index); // 出力: 2
</script>
上記コードでは、ID="parent"の要素内のli要素の中で、3番目（インデックス番号2）のli要素の、親要素（#parent）の直下の要素の中でのインデックス番号を取得します。
4. index()を使った実用的なテクニック
- クリックされた要素のインデックス番号を使って、対応するコンテンツを表示する
- 選択された要素のインデックス番号を元に、次の要素や前の要素を取得する
- 要素の並び順を変更する際に、index()で現在の順番を保持する
まとめ
jQueryのindex()メソッドは、要素の順番を扱う際に非常に便利なメソッドです。本記事で紹介した内容を参考に、ぜひ色々な場面で活用してみてください。
参考文献
関連QA
| 質問 | 回答 |
|---|---|
index()メソッドで取得できるインデックス番号は何から始まりますか？ |
0から始まります。 |
| 特定の要素群の中でのインデックス番号を取得するにはどうすればよいですか？ | index()メソッドの引数にセレクタを指定します。 |
| 親要素を指定してインデックス番号を取得するにはどうすればよいですか？ | index()メソッドの引数に親要素のセレクタを指定します。 |
その他の参考記事:jquery eq 取得