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

例えば、ol 要素の中に li 要素が5つあったとして、li 要素のどれがクリックされたかをjQueryで拾いたいといった状況になったとします。
1つの方法としては、5つの li 要素すべてにid名を付けると言うやり方が考えられるかと思います。

ただイベント情報を拾うためだけにid名を付けるというのも中々面倒なやり方で、管理としても煩雑になる可能性があります。
そういった時に、id名を付けずに li 要素の何番目かを取得する方法です。

下記のようなhtmlがあったとします。

<ol id="list">
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
  <li>4番目</li>
  <li>5番目</li>
</ol>

このhtmlで、どのli要素がクリックされたかをjQueryで取得したい場合、下記のような記述となります。

$(function() {
  $('#list li').on('click', function() {
    alert( $('#list li').index(this) );
  });
});

#list li の部分に拾いたい要素を指定します。例では ol id="list" の中のli要素のクリックイベントを拾いたいので、このような指定となります。

注意点としては「$(function(){});」を忘れて、head要素に記述するとうまくクリックイベントが拾えません。これはDOM要素作成のタイミングとjQueryの実行タイミングの問題で、html要素を取得する前にjQueryが実行され、指定の要素が無いという結果となりエラーとなります。
「$(function(){ });」で囲うようにする事で、DOM要素の読込み後に実行されるようになるので、head要素内でもエラーとならなくなります。

もう1つの注意点は、要素番号は0始まりとなりますので、例えば1番目をクリックした場合alertで返ってくる値は0となります。
これを1としたい場合は

$('#olist li').index(this) + 1;

と実行結果に1を足すことで実現できます。