jquery 対象の要素が何番目の要素なのかが知りたい（index()）

サンプル

<ul>
   <li>鳥精</li>
   <li>豚精</li>
   <li>丸ごとシマウマ</li>
</ul>

<script>
   $('ul').on('click', 'li', function(){
      var idx = $('ul').index(this);
      
      console.log( 'index = ' + idx );
   });
</script>

このままだと「ul」が複数あったときが面倒。IDを割り振れば手っ取り早いんだけどね・・・。

<ul>
   <li>鳥精</li>
   <li>豚精</li>
   <li>丸ごとシマウマ</li>
</ul>

<script>
   $('ul').on('click', 'li', function(){
      // クリックされた対象の親（$(this).parent()）で「index()」をする
      var idx = $(this).parent().index(this);
      
      console.log( 'index = ' + idx );
   });
</script>