jQueryのeachで繰り返し処理を実行する方法|HTML要素と配列で処理を繰り返す

この記事は約3分で読めます。
広告

HTMLの数ぶん要素を取得したいときや、配列に格納してある要素ぶん、処理を繰り返したいとき使うのがjQueryの「each()」。
「each()」を使った処理の繰り返し方法をデモを使いながら見ていきましょう。

HTML上の要素ぶん繰り返すとき

このデモでは、HTMLのリストの数だけ処理をくりかえします。
下のHTMLからindex番号と要素を「each()」で取得し繰り返します。

HTML
<ul class="demo1">
  <li>彗星</li>
  <li>金星</li>
  <li>地球</li>
</ul>
jQuery
$(".demo1 li").each(function(i,e) {
  console.log(i + "番は" + $(e).text() + "。\n");
});
結果
0番は彗星。
1番は金星。
2番は地球。

「each()」で取得する時、「i」にはインデックス番号が入っており
「e」にはHTML要素(<li>彗星</li>など)が入っています。
それをコンソールログでテキストを付けたし表示しています。
さらにクラス、IDの有無で条件を設定したり、HTML要素の中身で条件を分岐したり色々な指定ができる便利な「each()」。
次は配列数ぶん繰り返すときの処理を見てみよう。

配列の数だけ繰り返すとき

次は、配列の数ぶん処理を繰り返します。
下の配列から、配列番号と要素を「each()」で取得し配列数ぶん繰り返します。

jQuery
var wakusei = ["彗星", "金星", "地球"];
$.each(wakusei, function(i,v) {
  console.log(i + "番は" + v + "。\n");
});
結果
0番は彗星。
1番は金星。
2番は地球。

HTML要素を取得する時と同様に「i」にはインデックス番号が格納されており
「v」には、配列の値が格納されます。
それをコンソールログでテキストを付けたし表示しています。
結果はHTMLの時と同じだけど、配列とHTMLでは「each()」の書き方が少し違ってくる。
HTML要素の場合は、「$(“HTML要素”).each(function() {});」で
配列の場合は、「$.each(配列名, function() {});」になる。
なんか感覚的には「配列名.each(function() {});」こう書いてもイケそうだけど、これだとダメみたい。
配列から要素を取得する時は、いつもとちょっと違う書き方だったなぁ。と覚えとけば、要素を取得できなくて何時間も悩むことが無くなるはずです!

エンデ・バタローをフォローする
javascriptjQueryサイト制作

埼玉県北本市に住み始めて2年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました