どうも、バナナです。

在宅ワークにて間食が多くなり、体重が増えている気がします…。
怖いので体重計には乗りません。

今日はクリックした要素が何番目かを取得する方法を書いていきたいと思います。

jQueryではindex()という指定した要素が何番目かを取得するメソッドがあります。
このindex()メソッドを使用してクリックされた要素が何番目かを取得していきたいと思います。

index()の構文

まず簡単にindex()メソッドについて簡単に説明したいと思います。
下記のリストがあったとします。

<ul class="list1">
  <li>リスト1</li> // 0
  <li>リスト2</li> // 1
  <li>リスト3</li> // 2
</ul>

li要素は3つありますがリスト3を指定した場合、帰ってくる数字は2になります。
※帰ってくる番号は0から始まることに注意してください。

もし、指定要素が見つからなかった場合は-1を返します。

簡単にindex()メソッドについて理解できましたか？
では、クリックされた要素が何番目かを取得する方法について説明していきたいと思います。

HTML

<ul class="list">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ul>

jQuery

index()メソッドの使い方によって2つの書き方があります。
どちらも処理自体は同じです。

その1

$('.list li').on('click', function(){
  const index = $('.list1 li').index($(this));
  alert('クリックされたのは'+ index + '番目です。');
});

デモはこちら

index()メソッドに引数がある場合、その要素が何番目かを返してくれます。
↑は、li要素の中で$(this)（クリックした要素）は何番目かを取得しています。

その2

$('.list li').on('click', function(){
  const index = $(this).index();
  alert('クリックされたのは'+ index + '番目です。');
});

デモはこちら

index()メソッドに引数がない場合は、兄弟要素の中で何番目かを返してくれます。

「その2」は、index()メソッドに引数がありません。
なので、兄弟要素（li要素）の中で$(this)（クリックした要素）が何番目かを取得しています。

それぞれ書き方が少し異なりますが、やっていることは同じです。

まとめ

今日は、クリックした要素が何番目かを取得する方法を説明しました。

「その1」と「その2」の違いは理解できましたかね？
頭では理解しているのですが言語にするのが難しいですね…。
「その2」の方がさっぱりしててバナナは好きですね。

今回はこの辺で。
またね。