ラボ > Javascript関連:DOM関連

jquery 取得した要素をループで処理

取得した要素をいじって表示したり、いじった値を返したりしたい。

作成日:2017-12-26, 更新日:2018-09-26

基本

取得した要素を元に即表示するのか、値を合体させたりして返したいのか・・・でループが面倒。

・表示をゴニョゴニョしたい
・ゴニョゴニョした値を受け取りたい

「.each()」が非同期処理なので・・・ちょっと面倒だった。

表示をゴニョゴニョしたい

値を返さずにループ内で処理が完結するタイプ。

何も考えずにeach()で回せば手っ取り早い。

$(〇〇〇).each(function(){
   var elm = this; // 対象は「this」に入る
   
   $(〇〇〇).html(〇〇〇);
});

▼インデックス番号が欲しい場合

$(〇〇〇).each(function(num){
   ~ 処理 ~  // インデックス番号は「num」に格納されている
});

▼最後の要素のときに何かしたい

$(〇〇〇).each(function(num){
   ~ 処理 ~  // インデックス番号は「num」に格納されている
  if ( num == $(〇〇〇).length-1 ) {
     ~ 処理 ~ 
  }
});

ゴニョゴニョした値を受け取りたい

取得した要素を合体させたり・・・ゴニョゴニョした値が欲しい。

一旦、配列に変換する。

var aryDom = $(〇〇〇).get(); // 「$.makeArray($(〇〇〇))」でも良いみたい。詳細は、未調査。
for ( var i in aryDom ) {
   ~ 処理 ~
}

関連項目

jquery $.each()でbreak、continue