ある要素が所属する要素集合に対しての、インデックスを調べるスクリプトです。

html はこんな感じだと仮定します。


<button class="js-btn">button</button>
<button class="js-btn">button</button>
<button class="js-btn">button</button>

jQuery あるとき 🎊

クリックした要素のインデックスをアラートで表示します。


let $buttons = $('.js-btn');

$buttons.on('click', (e) => {

  e.preventDefault();
  let index = $buttons.index(e.currentTarget);

  alert(index);

});

このように、 jQuery だと簡潔に書くことができていい感じですね。

jQuery ないとき 🔨


let buttons =  document.getElementsByClassName('js-btn');

[].forEach.call(buttons, (el) => {

  el.addEventListener('click', (e) => {

    e.preventDefault();
    let index = Array.prototype.indexOf.call(buttons, e.currentTarget);

    alert(index);

  });

});

長くなりましたね。

少し解説

集めたボタンを配列に格納して、操作します。
普通は for 文で書くようなところですが、 forEach を使った方が好みなので、こうしました。
パフォーマンスでいうと for 文の方がいいと思います。


[].forEach.call(buttons, (el) => { ... })

Array.prototype.indexOf でインデックスを調べます。


Array.prototype.indexOf.call(buttons, e.currentTarget);

少しずつ You Dont Need jQuery に近づいていきたいですが、同時にES6で綺麗にコードをまとめていくことを念頭にしたいです。

おわります。