ある要素の中で、指定した要素が何番目にあたるのか、を取得する。
index(subject)
jQueryオブジェクト内で、引数で指定されたエレメントのインデックス番号を返す。インデックスは、ゼロから始まる連番。
もし渡されたエレメントがjQueryオブジェクト内に存在しない場合、戻り値には-1が返る。
サンプル
「いずれかのdivをクリックした際にそのdivがdiv全部の中で何番目にあたるか」をconsoleに吐き出す
$("div").click(function () {
var index = $("div").index(this);
console.log(index);
});
divがネストしてた場合、その全てについて値を返すので、実際にはclassやidを使ってある程度特定してやる必要がある。
例えば以下のようなHTMLで、id=hoge03の要素の順番を取得する場合
<div id="wrap"> <div class="elem" id="hoge01">element01 <div>child</div> </div> <div class="elem" id="hoge02">element02</div> <div class="elem" id="hoge03">element03</div> <div class="elem" id="hoge04">element04</div> <div class="elem" id="hoge05">element05</div> </div>
class=elemの中での順番を取得する場合
$(".elem").index($("#hoge03"));
classとか関係なく、wrap内のdivで何番目かを取得する場合
$("#wrap div").index($("#hoge03"));
自分的ちょっとひっかかったところ
検索先として指定するエレメントは親要素ではない
検索先として親階層を指定するわけではなくて、自分自身の階層を指定するというのが最初微妙に理解できず躓きました。
上記例で#wrapに包まれたdivを検索したい場合、つい包括した要素である$(“#wrap”)を指定してその中の要素を検索させる、と考えちゃったのですが、$(#wrap div”)という形でその要素自体の集団を指定するように書く必要があります(例:js02)
その際divがネストしていたら全てのdivを対象に検索をかけてしまうので、$(“.elem”)などとclass指定で絞ってやるほうがよさそうです。(例：js01)
検索対象として指定する引数は必ずindex($(“#hoge”))の形で指定する
実際には当たり前の話でここで躓く人なんていないかもしれませんが・・・
ググった際の例示がどれもclickファンクションで検索対象がthis指定だったので、イベントではなく、ベタに要素をセレクタ指定して探すときに、ついindex(“#hoge”)とセレクタのみで引数を書いてしまい、どうしても-1が返って来てしまい混乱しました。