対象の中で、何番目の要素なのかを調べるときにはjQueryの「index」を使用する。

オブジェクトの中で、指定した要素が何番目の要素かを知るためにはjQueryの「index」が便利です。

どういった場面で使用するかというと、例えば「クリックしたオブジェクトは何番目なのか?」や「リストの中で何番目の項目なのか?」などを取得するのに使います。

jQueryの「index」

それではjQueryの「index」を具体的に見ていきましょう。

まずは書式ですね。

index(Element)

戻り値は"数字"が返ってきます。

リストの中で3番目の項目の値を取得する場合

ul要素で書かれたリストの中で3番目の項目を知りたい場合は下記のようになります。

まずは今回使用するHTMLです。

<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li id="hoge">リスト3</li>
 <li>リスト4</li>
 <li>リスト5</li>
</ul>

この中から"リスト3"が何番目かを取得するには下記のJSを書きます。

var index = $("#hoge").index();
alert(index);

このスクリプトで表示される値は「2」です。

数えが「0」から始まるので、3つ目が「2」となっています。

クリックされたものなどを取得する際に使用するので覚えておくと便利です。

関連するWeb制作・開発Tips

関連リンク