2021-02-22

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

複数ある要素のうち、クリックされた要素が何番目なのかを取得したい場合があります。 その場合は、index()メソッドを使用すると取得できます。

次のように複数のli要素があり、クリックされたli要素が何番目かを取得するとします。

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

$(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は何番目かを取得している」というのが見てすぐわかります。

どちらでも取得できますので、好きな方で取得してください。