jQuery マウスオーバーした要素が何番目かを知るには？

Question

###前提・実現したいこと

jQueryのマウスオーバーで、何番目の要素にマウスが置かれたかを知りたいです。

###該当のソースコード

<ul>
 <li class="list">1</li>
 <li class="list">2</li>
 <li class="list">3</li>
</ul>

$(".list").mouseover(function(){

 //何番目のリストを取得したか知り、使いたい

});

多分、簡単に取得できると思うのですが検索を繰り返してもなかなか見つからなかったため質問させていただきました。よろしくお願い致します。

Answer 1

これが一番手っ取り早いかと。

$(".list").mouseover(function() {
$(".list").index(this); // listクラスを持つ要素の中で、自身が何番目か
});

Comments

[shi_ue]

おお！こんなことが出来るんですね。目から鱗。
JQueryは内部でどうやって判別してるんでしょうね。
同じようなDOMのエレメントを判別する仕組み（idみたいなもの）があるんでしょうか。

[takumi123]

できました！ありがとうございます！

[masaya_ohashi]

jQueryの内部を見てみましたが、単純にDOMノード同士の===比較のようです。$(".list")で見つかるノード全部と、thisノードを比較しています。

[shi_ue]

ずいぶん力技ですね（笑）ありがとうございました。

Answer 2

参考ページ

• http://semooh.jp/jquery/api/core/index/subject/

サンプルで、クリックした dev が何番目かを表示する例があります。

でも、私なら、 <li data-index="1"> のように独自属性を設定して、
クリックされたときに $(this) の data-index 属性を取得するようにすると思います。

Answer 3

$(this).get(0).innerText
```で`li`の中身が取れますよ。

Comments

[takumi123]

何度も回答いただきありがとうございます。またよろしくお願い致します。