1. uto-usui

    Posted

    uto-usui
Changes in title
+《JavaScript》 jQueryなしで、ある要素集合に対しての要素のインデックスを調べる方法。
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,83 @@
+
+ある要素が所属する要素集合に対しての、インデックスを調べるスクリプトです。
+
+html はこんな感じだと仮定します。
+
+```html
+
+<button class="js-btn">button</button>
+<button class="js-btn">button</button>
+<button class="js-btn">button</button>
+
+```
+
+## jQuery あるとき 🎊
+
+クリックした要素のインデックスをアラートで表示します。
+
+```js
+
+let $buttons = $('.js-btn');
+
+$buttons.on('click', (e) => {
+
+ e.preventDefault();
+ let index = $buttons.index(e.currentTarget);
+
+ alert(index);
+
+});
+
+```
+
+このように、 jQuery だと簡潔に書くことができていい感じですね。
+
+
+
+## jQuery ないとき 🔨
+
+```js
+
+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` 文の方がいいと思います。
+
+```js
+
+[].forEach.call(buttons, (el) => { ... })
+
+```
+
+`Array.prototype.indexOf` でインデックスを調べます。
+
+```js
+
+Array.prototype.indexOf.call(buttons, e.currentTarget);
+
+```
+
+少しずつ [You Dont Need jQuery](https://github.com/oneuijs/You-Dont-Need-jQuery) に近づいていきたいですが、同時にES6で綺麗にコードをまとめていくことを念頭にしたいです。
+
+おわります。