Posted at

jQueryでクリックされた要素が何番目か取得する

More than 5 years have passed since last update.

イベントリスナーのコールバックの中でクリックされた要素が何番目の要素か知りたい!

そういうときに役立つTipsです。

<ul>

<li class="some-item">hoge</li>
<li class="some-item">foo</li>
<li class="some-item">bar</li>
</ul>

こんな感じのHTMLがあり、li.some-item要素がクリックされたときに何番目の要素かをjQueryを使って知りたいとします。

そんなときはjQueryのindexメソッドを使いましょう。

$('li.some-item').on('click', function(){

var index = $('li.some-item').index(this);

console.log(index + 'th item clicked!');
});

簡単ですね!

インデックスは配列と同じで0から始まるということに注意してくださいね。

参考文献