ラボ > Javascript関連:DOM関連、イベント関連

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

例えば、クリックされたliタグが何番目のliタグなのかが知りたい

作成日:2018-01-04, 更新日:2018-01-04

サンプル

<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>