「脱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 ですが、 スプレッド演算子... )を用いて書くこともできます。