ある要素が所属する要素集合に対しての、インデックスを調べるスクリプトです。
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で綺麗にコードをまとめていくことを念頭にしたいです。
おわります。