要素の順番を取得するindex()の使い方をご説明します。
タブメニューなどでクリックした順番を取得したりと、便利に使う方法もお伝えします。
目次
基本的な使い方
要素の順番を取得します。
構文
$(‘セレクタ’).index();
これだけで指定したセレクタの順番を取得できます。
該当がなければ-1を返すので、if文などでの条件分岐にも使えますね。
指定した要素の順番を取得
まずはクリックした要素の順番を取得して、コンソールに表示させてみましょう。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<ul> <li>北海道</li> <li>東北</li> <li id="kanto">関東</li> <li>東海</li> <li>関西</li> <li>中国</li> <li>四国</li> <li>九州</li> </ul> |
jQuery
|
1 2 3 4 5 6 7 8 9 |
$(function() { // <li>要素の順番を変数に格納 var i = $('li').index(); // 変数の中身をコンソールに表示 console.log(i); }); |
結果
0
最初の<li>要素の順番0がコンソールに表示されました。
指定した要素が複数ある場合は、最初に該当した順番が取得されます。
0から数えるため、一番最初の0が取得されました。
しかしこれでは指定した要素が複数あった場合、取得したい順番が取得できないこともあるでしょう。
以下のようにすれば特定の要素の順番が取得できます。
引数を指定して順番を取得
以下のようにIDを付け、そのIDを引数で指定すれば、取得したい要素の順番が取得できます。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<ul> <li>北海道</li> <li>東北</li> <li id="kanto">関東</li> <li>東海</li> <li>関西</li> <li>中国</li> <li>四国</li> <li>九州</li> </ul> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { // 特定の要素を変数に格納 var elm = $('#kanto'); // 特定の要素を引数に指定し、順番を変数に格納 var i = $('li').index(elm); // 変数の中身をコンソールに表示 console.log(i); }); |
結果
2
<li>要素の中から、特定のIDが付いた要素が何番目かを取得しました。
上記では<li>要素全体の中でkantoのIDが付いた<li>要素は3番目なので2とコンソールに表示されました。
セレクタに指定して順番を取得
上記とは逆ですが、セレクタにIDを付け、要素を引数で指定しても、取得したい要素の順番が取得できます。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { // 特定の要素を変数に格納 var elm = $('#kanto'); // 特定の要素をセレクタに指定し、順番を変数に格納 var i = $(elm).index('li'); // 変数の中身をコンソールに表示 console.log(i); }); |
結果
2
先ほどとはセレクタと引数の値が逆ですが、同様に順番を取得できます。
さまざまな使い方
クリックした要素の順番を取得
クリックした要素が、セレクタで指定した要素の何番目かを取得し、HTMLに表示させます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul> <li>北海道</li> <li>東北</li> <li id="kanto">関東</li> <li>東海</li> <li>関西</li> <li>中国</li> <li>四国</li> <li>九州</li> </ul> <p><span id="num">－</span>番目</p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // 要素をクリックしたら発動 $('li').click(function() { // 引数にthisを指定し、クリックした順番を変数に格納 var i = $('li').index(this); // 順番を表示 $('#num').text(i); }); }); |
結果（動作サンプル）
以下、地方のテキストをクリックすると順番が表示されるかと思います。
- 北海道
- 東北
- 関東
- 東海
- 関西
- 中国
- 四国
- 九州
－番目
北海道をクリックすると0番目、九州をクリックすると7番目と表示されるかと思います。
上記のようにindex()の引数にthisを指定すれば、クリックした要素の順番が取得できます。
$(this)を使って簡単に取得
以下のように$(this)を使って簡単に順番を取得することもできます。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // 要素をクリックしたら発動 $('li').click(function() { // セレクタを$(this)にし、クリックした順番を変数に格納 var i = $(this).index(); // 順番を表示 $('#num').text(i); }); }); |
結果（動作サンプル）
以下、地方のテキストをクリックすると順番が表示されるかと思います。
- 北海道
- 東北
- 関東
- 東海
- 関西
- 中国
- 四国
- 九州
－番目
$(this)を使っても、先ほどと同様に順番が取得できました。
index()でタブメニューを自作
jQueryでタブメニューを作る際はプラグインを使われている方も多いかと思いますが、index()を使えばプラグインなしでも作ることが可能です。
下記の記事でご紹介していますので、是非試してみてください。
