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

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

jQueryで書いていた時は頻繁に使用していた「.each()」。JavaScriptでは「forEach」を使用することで同じようにDOM要素をループさせることができます。

アロー関数を使うと短く記述できるのでおすすめ。

jQuery

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

JavaScript

const input=document.querySelectorAll('input');
input.forEach(elem=>{
  console.log(elem.value);
})

//上記はIE未対応。IEの場合は以下
Array.prototype.forEach.call(input,elem=>{
  console.log(elem.value);  
})

 

@ハクト

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

Twitter