index() は特定の要素のインデックス番号を取得することができるメソッドです。複数の要素に対してインデックス番号に応じて処理を分岐させたい場合などに便利です。
index() の使い方
index() の引数の指定方法には以下の３パターンあります。
|
1 2 3 |
jQueryオブジェクト.（jQueryオブジェクト） jQueryオブジェクト.（セレクタ） jQueryオブジェクト.() |
どの場合もマッチした要素のインデックス番号を返しますが、もしマッチする要素がなければ -1 を返します。また、インデックス番号は 0 から始まるので注意してください。
以下では、それぞれのパターンについてひとつずつ説明していきます。
引数に jQuery オブジェクトを指定した場合
この場合は、マッチする要素の中から引数に指定されている jQuery オブジェクトが何番目にあるかを返します。
以下はクリックしたリストの番号を表示するサンプルです。
HTML
|
1 2 3 4 5 6 7 |
<ul> <li class="sample">1: Click Me!</li> <li class="sample">2: Click Me!</li> <li class="sample">3: Click Me!</li> <li class="sample">4: Click Me!</li> <li class="sample">5: Click Me!</li> </ul> |
jQuery
|
1 2 3 4 |
$('li').on('click', function () { var index = $('li.sample').index(this); alert(index); }); |
引数に指定した this はクリックされたオブジェクトが代入されおり、index() はクリックされた要素が .sample というクラスをもつリストの何番目にあるかを返します。
- 1: Click Me!
- 2: Click Me!
- 3: Click Me!
- 4: Click Me!
- 5: Click Me!
上のサンプルでは、それぞれのリストをクリックすると、それに対応した番号がダイアログで表示されます。
引数にセレクタを指定した場合
この場合は、マッチする要素の中から引数で指定したセレクタにマッチする要素が何番目にあるかを返します。マッチする要素が複数ある場合は、最初にマッチしたインデックス番号を返します。
以下はボタンをクリックするとマッチした要素のインデックス番号を返すサンプルです。
HTML
|
1 2 3 4 5 6 7 |
<ul class="test"> <li>リスト１</li> <li>リスト２</li> <li class="sample2">リスト３</li> <li>リスト４</li> <li class="sample2">リスト５</li> </ul> |
jQuery
|
1 2 3 4 |
$('li').on('click', function () { var index = $('.sample2').index('ul.test li'); alert(index); }); |
サンプルでは、index() はリストの中から .sample 2というクラスをもつ要素が何番目にあるかを返します。
- リスト１
- リスト２
- リスト３
- リスト４
- リスト５
上のサンプルでは、３番目のリストが .sample2 のクラスをもつので 2 が表示されます。
今回のサンプルでは、引数に 'ul.test li' のように指定しています。このようにした理由は、リストをセレクタで限定しないとページ内のすべてのリストに対するインデックス番号を返してしまうためです。
引数に何も指定しなかった場合
この場合は、マッチする要素が兄弟要素の中で何番目にあるのかを返します。
以下はボタンをクリックするとマッチした要素のインデックス番号を返すサンプルです。
HTML
|
1 2 3 4 5 6 7 8 |
<ul class="test"> <li>リスト１</li> <li>リスト２</li> <li class="sample3">リスト３</li> <li>リスト４</li> <li>リスト５</li> <ul> <button name="sample3">Click Me!</button> |
jQuery
|
1 2 3 4 |
$('button[name=sample3]').on('click', function () { var index = $('li.sample3').index(); alert(index); }); |
index() は .sample3 というクラスをもつリストが、兄弟要素の中で何番目にあるかを返します。
- リスト１
- リスト２
- リスト３
- リスト４
- リスト５
上のサンプルでは、３番目のリストが .sample3 のクラスをもつので 2 が表示されます。
