jQueryでループ処理を行う際によく使われる each()の使い方を分かりやすくお伝えします。
通常のHTML要素だけでなく、配列やオブジェクトもjQuery.each()で処理できます。
ループから抜ける方法も併せてご紹介します。
目次
each() でのループ処理
複数の要素に対してループ処理をします。
複数の要素を処理
HTML
|
1 2 3 4 5 |
<ul> <li>大阪</li> <li>京都</li> <li>三ノ宮</li> </ul> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // li要素をループ処理 $('li').each(function() { // コンソールに1つずつ出力 console.log($(this).text()); }); }); |
結果（コンソール）
ブラウザのコンソールに結果を出力します。
大阪
京都
三ノ宮
上記のようにコンソールに<li>要素のテキストを1つずつ出力させました。
$(this)を使って要素を取得します。
引数を指定して処理
each()は、引数に連番とループ処理する要素を指定することも可能で、それらを指定して簡単に値を取得できます。
HTML
|
1 2 3 4 5 |
<ul> <li>大阪</li> <li>京都</li> <li>三ノ宮</li> </ul> |
jQuery
第二引数に指定したvalで値を出力させ$(this)は使っていません。
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // each()に引数を指定してループ処理 $('li').each(function(i, val) { // コンソールに1つずつ出力 console.log(i+':'+$(val).text()); }); }); |
以下のように、第一引数だけを指定することも可能です。
第二引数は省略し$(this)を使って取得しています。
|
1 2 3 4 5 6 7 |
// each()に第一引数だけ指定してループ処理 $('li').each(function(i) { // コンソールに1つずつ出力 console.log(i+':'+$(this).text()); }); |
結果（コンソール）
上記2つのサンプルともに同じ結果になります。
0:大阪
1:京都
2:三ノ宮
今度は連番を振って1つずつ出力させました。
each() の基本構文
|
1 2 3 4 5 |
$( セレクタ ).each(function(インデックス, エレメント) { ループ処理 }); |
for()のようにカウントを取らずに、指定したセレクタの数だけループしてくれるので便利ですね。
- インデックス
0から始まる連番を自動で振ってくれる - エレメント
要素のテキストなどの値
参考：jQueryのfor文で繰り返し処理(continue,breakも)
jQuery.each() でのループ処理
複数の要素だけでなく、配列やオブジェクトに対してもループ処理ができます。
複数の要素を処理
まずは通常の要素をループ処理します。
HTML
|
1 2 3 4 5 |
<ul> <li>高崎</li> <li>前橋</li> <li>太田</li> </ul> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // li要素をループ処理 $.each($('li'), function(i, val) { // コンソールに1つずつ出力 console.log(i+':'+$(val).text()); }); }); |
結果（コンソール）
ブラウザのコンソールに結果を出力します。
0:高崎
1:前橋
2:太田
配列を処理
jQuery.each()は、配列やオブジェクトも扱えるのが特徴ですね。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // 配列を変数に格納 var arr = ['高崎','前橋','太田']; // 配列をループ処理 $.each(arr, function(i, val) { // コンソールに1つずつ出力 console.log(i+':'+val); }); }); |
結果（コンソール）
ブラウザのコンソールに結果を出力します。
0:高崎
1:前橋
2:太田
配列もループ処理されました。
オブジェクトを処理
オブジェクトも処理可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // オブジェクトを変数に格納 var obj = {takasaki:'高崎', maebashi:'前橋', ota:'太田'}; // 配列をループ処理 $.each(obj, function(key, val) { // コンソールに1つずつ出力 console.log(key+':'+val); }); }); |
結果（コンソール）
ブラウザのコンソールに結果を出力します。
takasaki:高崎
maebashi:前橋
ota:太田
オブジェクトもループ処理されました。
インデックスは連番ではなく、オブジェクトで指定したkeyの部分が表示されます。
単なる連番ではなく、独自のキーを命名できるので使い勝手もいいですね。
ちなみに、先ほどのサンプルは第一引数がiだったのに、今回はkeyですが特に意味はありません。
好きに名付けて大丈夫ですが、indexやkeyといった意味のある命名をするのが一般的ですね。
jQuery.each() の基本構文
|
1 2 3 4 5 |
$.each( 配列やオブジェクト , function(インデックス（オブジェクトはキー）, エレメント) { ループ処理 }); |
通常のeach()とは以下の部分が違います。
$.eachで始まる- 対象の要素や配列などは第一引数で指定する
配列や要素はインデックス、オブジェクトはキーを取得できます。
- インデックス（オブジェクトはキー）
0から始まる連番を自動で振ってくれる。オブジェクトは独自に命名したキーが取得される。 - エレメント
要素のテキストなどの値
ループを抜ける
each()でループを抜ける際continueとbreakは使えません。
ループ処理をスキップ
ループ処理をスキップする際はreturn false以外を使います。
continueは使えません。
HTML
|
1 2 3 4 5 |
<ul> <li>大阪</li> <li>京都</li> <li>三ノ宮</li> </ul> |
jQuery
第二引数に指定したvalで値を出力させ$(this)は使っていません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function() { // each()に引数を指定してループ処理 $('li').each(function(i, val) { // もしインデックスが1だったらループをスキップ if (i == 1) { // ループをスキップ return true; } // コンソールに1つずつ出力 console.log(i+':'+$(val).text()); }); }); |
結果（コンソール）
0:大阪
2:三ノ宮
インデックス1の京都がスキップされました。
return trueがcontinueの代わりとなり、処理をスキップしてくれます。
ちなみにreturn trueはreturn nullだろうがreturn undefinedであろうがreturn 0であろうが構いません。
return falseでなければ何でもいいのです。
ただreturn continueのようなreturnのあとに文字列を指定するときはreturn 'continue'とクオーテーションで囲わないとエラーになります。
まぁ、ここはreturn trueでいいと思います。
ループ処理を中断
ループ処理を途中で中断させる場合はreturn falseを使います。
breakは使えません。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(function() { // 配列を変数に格納 var arr = ['高崎','前橋','太田', '伊勢崎']; // each()に引数を指定してループ処理 $.each(arr, function(i, val) { // もしインデックスが2だったらループを中断 if (i == 2) { // ループを中断 return false; } // コンソールに1つずつ出力 console.log(i+':'+val); }); }); |
結果（コンソール）
0:高崎
1:前橋
値が前橋まで出力され、それ以降は中断されました。
return falseを使えばそれ以降は処理を中止しますが、ループ処理に限らず、リンクを無効にしたりといった元々の効果を打ち消してくれます。
if文を使わない、もう一つのやり方も以下にご紹介します。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function() { // 配列を変数に格納 var arr = ['高崎','前橋','太田', '伊勢崎']; // each()に引数を指定してループ処理 $.each(arr, function(i, val) { // コンソールに1つずつ出力 console.log(i+':'+val); // 値が前橋の次から中断 return (val != '前橋'); }); }); |
結果（コンソール）
0:高崎
1:前橋
先ほどと同様に値が前橋まで出力され、それ以降は中断されました。
if文を使わなくていいので、ちょっとはスマートかなぁと思います。
