すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

jQuery index(): 特定の要素が何番目にあるか(インデックス番号)を取得する

jQuery - index()

どもども、すずしんです。

jQueryについての備忘録を書いてみます。
今回は、index()の使い方についてです。

index()とは?

index()は、jQueryオブジェクト内で、引数で指定された要素のインデックス番号を返す関数です。
ちなみに、インデックス番号は0から始まる連番となっています。
もし渡された要素がjQueryオブジェクト内に無い場合、戻り値は-1となります。
引数には、検索したい要素を指定します。

基本的な使い方

例えば、以下のようなHTMLがあるとします。
これはフルーツの一覧を表しています。

<ul class="fruits">
<li>りんご</li>
<li>ぶどう</li>
<li>もも</li>
<li>バナナ</li>
<li>メロン</li>
</ul>
<p class="index">選択されたのは<span>-</span>番目です。</p>

この一覧の中から、クリックされたフルーツ(li)のインデックス番号を取得するには以下のようなコードを書きます。
こうすると、変数indexにクリックされた要素のインデックス番号が代入されます。

$('ul.fruits li').click(function(){
  var index = $('ul.fruits li').index(this);
});

これをもとにして、選択された要素が何番目にあるかを表示させてみます。
この例のHTMLでは、p.indexのspan要素にインデックス番号を表示させるとしていますので…。
その場合のコードは以下のような感じです。

$('ul.fruits li').click(function(){
  var index = $('ul.fruits li').index(this);
  $('p.index span').text(index + 1);
});

サンプル

上記のコードを試しに導入してみました。
実際にフルーツを選んでクリックしてみてください。
選んだフルーツのインデックス番号が正しく表示されると思います。
りんごなら1番目、メロンなら5番目となりますよね。

  • りんご
  • ぶどう
  • もも
  • バナナ
  • メロン

選択されたのは-番目です。


ひとこと

今回の記事では、jQueryのindex()の使い方についてまとめてみました。
実際に試してみると分かりますが、特にこれといって難しい点はありませんよね。
特定の要素のインデックス番号が簡単に取得できると思います。

jQueryを使っている時に、ある特定の要素のインデックス番号を取得したい時があると思います。
その際には、今回取り上げたindex()を使ってくださいね。

最後まで読んでいただきありがとうございました。
それではまたお会いしましょう。
あなたの心友でありたい、すずしんより。