｢脱jQuery｣ 生JSで.each()のようにquerySelectorAll()で取得した要素をforEachする
jQueryでよく使う each() を生JavaScriptではどんな風に記述できるか紹介します。
jQuery
$('.selector').each(function(index, element) {
});
index は番目、 element は走査中の要素を指しています。
生JS
forEach()
Array.prototype.forEach.call(document.querySelectorAll('.selector'), function(element, index) {
});
配列型オブジェクト を 配列 として扱うために、少し回りくどくなっています。
[].forEach.call(document.querySelectorAll('.selector'), function(element, index) {
});
また、 Array.prototype は [] と書くこともできます。
for()
var elements = document.querySelectorAll('.selector');
for (var index = 0, length = elements.length; index < length; index++) {
}
普通に for文 で書くこともできます。
Array.from()
Array.from(document.querySelectorAll('.selector'), (element, index) => {
});
ES6 ですが、 Array.from() を使うと少しスッキリ書くことができます。
スプレッド演算子
[...document.querySelectorAll('.selector')].forEach((element, index) => {
});
これも ES6 ですが、 スプレッド演算子 （ ... ）を用いて書くこともできます。
CSS本執筆しました！！！
CSS本出します！1/29発売予定
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs