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

イベントリスナーのコールバックの中でクリックされた要素が何番目の要素か知りたい!
そういうときに役立つ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から始まるということに注意してくださいね。

参考文献

• jQuery API Documenatation | .index()