JSでもDOM操作でサクッとループ。jQuery「.each()」のようにループさせる

@ハクト 2022-05-21 12:36:44に投稿

jQueryで書いていた時は頻繁に使用していた「.each()」。JavaScriptでは以下のように主に3つの書き方があります。

「forEach」が一番しっくりきます。

jQuery

$('input').each(function(index,elem){
  console.log($(elem).val());
})

JavaScript

for

const elements = document.querySelectorAll('.sampleClass');
elements.forEach(function(element) {
    console.log(element.textContent);
});

forEach

const elements = document.querySelectorAll('.sampleClass');
elements.forEach(function(element) {
    console.log(element.textContent);
});

for..of

for (let element of document.querySelectorAll('.sampleClass')) {
    console.log(element.textContent);
}

PR

フリーランスエンジニアに安心保証
動画編集入門プラン（2ヶ月）用LP
jquery javascript foreach each
B!

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter