jQuery: クリックされた要素が何番目かを取得する方法
複数ある要素のうち、クリックされた要素が何番目なのかを取得したい場合があります。 その場合は、index()メソッドを使用すると取得できます。
次のように複数のli要素があり、クリックされたli要素が何番目かを取得するとします。
HTML
<ul>
<li><a href=""></a>リストA</li>
<li><a href=""></a>リストB</li>
<li><a href=""></a>リストC</li>
<li><a href=""></a>リストD</li>
</ul>
jQuery
$(function(){
$('li').on('click', function(){
// 方法 1
var idx1 = $(this).index();
console.log(idx1);
// 方法 2
var idx2 = $('li').index(this);
console.log(idx2);
});
})
仮にリストCをクリックした場合、どちらもconsole.log()は「2」と表示されます。 リストAをクリックした場合は「0」です。
// 方法 1
var idx1 = $(this).index();
この記述の方がシンプルですね。 index()メソッドに引数がない場合は、兄弟要素の中で何番目の要素かを返します。
// 方法 2
var idx2 = $('li').index(this);
パッと見で、わかりやすいのはこちらかもしれません。 「li要素の中でthisは何番目かを取得している」というのが見てすぐわかります。
どちらでも取得できますので、好きな方で取得してください。