こんにちは！フリーランスの桃太郎です。
jQueryでは複数の要素の集まりに対して指定した処理を行うためのメソッドとしてeachメソッドがあります。
この記事では
- eachメソッドの基本
- eachメソッドで配列の繰り返し処理を行う方法
など基礎的な内容から、実践的な内容についても解説していきます。
jQueryのeachメソッドについて正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します！
eachメソッドとは？
それでは、まず最初にeachメソッドについて基本的な知識から勉強していきましょう！
eachメソッドは、HTML要素・配列・オブジェクトなどに対して繰り返し処理を行うことができるメソッドになります。例えば、次のようなHTMLを見て下さい！
<ul>
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>
このリスト要素（li）1つずつに対して何か処理を行いたい時にeachメソッドは適しているわけです。
また、次のような配列・オブジェクトなどに対しても同様です。
var array = ['イチゴ', 'リンゴ', 'メロン', 'ブドウ'];
var obj = {
name: 'taro',
age: 30,
area: 'Tokyo'
};
それぞれの要素1つずつに対して、繰り返し何らかの処理を行いたい時にeachメソッドは効率よくプログラムを書くことができるのです。
HTML要素での「each()」使い方
この章では、HTML要素を対象にしたeachメソッドの使い方について見ていきましょう。一般的な構文や書き方、および実際のプログラミング手法について学んでいきます。
基本的な構文と書き方について
まずは、基本となる構文から見ていきましょう！ 一般的には、HTML要素に対してeach()を実行し繰り返し処理を記述する関数を指定すればOKです。
HTML要素.each(function(index, element) {
//繰り返し処理を記述する
})
eachに指定する関数は引数として「index（インデックス番号）」「element（HTML要素）」を取得できます。この引数を上手く活用することで、HTML要素1つずつに対して効率よく処理を行うことができます。
HTML要素に対して繰り返し処理を行う方法
それでは、実際にeachメソッドを使ってプログラムを組み立ててみましょう！
冒頭で紹介した次のリスト要素を見て下さい。
<ul>
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>
このリスト要素を1つずつ取得してコンソールに出力するには次のように記述します。
$('li').each(function(index, element) {
console.log(index);
console.log($(element).text());
})
実行結果
0 サンプル１ 1 サンプル２ 2 サンプル３
この例では、リスト要素に対して1つずつのインデックス番号とテキストを出力しています。eachに設定した関数の引数「element」には、取得したHTML要素が格納されているので「$(element)」とすればリスト要素を取得できます。
あとは、「text()」を使ってリスト要素のテキスト文字を取得することが可能です。インデックス番号については、0から数え始めるという点に注意しましょう！
配列・オブジェクトでの「each()」使い方
この章では、配列・オブジェクトに対してeachメソッドを使う方法を見ていきましょう！ 構文が少し異なるので改めて書き方について学習し、実際のプログラム手法を学んでいきます。
基本的な構文と書き方について
まずは、一般的な構文から見ていきましょう！ HTML要素を対象にする時とは違い、eachメソッドの第1引数に配列やオブジェクトを指定することになるので注意しましょう。
次のサンプル例を見て下さい！
$.each(配列・オブジェクト, function(index, value) {
//繰り返し処理を記述する
})
「$.each()」という記述に変更となり、その第1引数に処理を行いたい配列・オブジェクトを指定します。
第2引数には、繰り返し処理を行うための関数を指定するのは前章と同様です。関数の引数には、「index（インデックス番号）」「value（値）」を取得することができます。
配列・オブジェクトに対して繰り返し処理を行う方法
それでは、実際のプログラミング手法について見ていきましょう！ 配列要素に格納されている値1つずつをコンソールに出力するには、次のように記述します。
var array = [3,6,2,8,6];
$.each(array, function(index, value) {
console.log(index + ': ' + value);
})
実行結果
0: 3 1: 6 2: 2 3: 8 4: 6
この例では、配列「array」をeachメソッドの第1引数に指定することで、各要素にアクセスできるようになります。関数の引数「index / value」を使うことで、実行結果のように要素1つずつを取得できているのが分かりますね。
この方法はオブジェクトでもまったく同じように動作します。
var obj = {
name: 'taro',
age: 30,
area: 'Tokyo'
};
$.each(obj, function(property, value) {
console.log(property + ': ' + value);
})
実行結果
name: taro age: 30 area: Tokyo
このように、配列をオブジェクトに置き換えても同様に動作しています。関数の第1引数は「インデックス番号」ではなく「プロパティ」が取得できているのが分かりますね。
break / continueの使い方
繰り返し処理を途中で終了する方法
eachメソッドは繰り返し処理を実現しますが、ではその繰り返し処理を途中で終了させるにはどうすれば良いでしょうか？
JavaScriptのfor文で繰り返し処理を途中で終了させるにはbreak文を使いますが、jQueryのeachにはbreak文は用意されていません。その代わりに、終了させる箇所にreturn false と記述します。こちらも具体的なサンプルで確認して見ましょう。
例えば、東京都の23区の家賃相場が昇順に並んでいるデータを示すHTML文があり、その相場が10万以下のものの価格に対して太字にする処理をjQueryで実施するとします。
[HTML]
<h2> 家賃相場 </h2> <p>東京都江戸川区 <span>55000</span>円</p> <p>東京都中野区 <span>80000</span>円</p> <p>東京都台東区 <span>150000</span>円</p> <p>東京都渋谷区 <span>250000</span>円</p> <p>東京都港区 <span>300000</span>円</p>
[jQuery]
$('p span').each(function(){
if($(this).text() > 100000) return false;
var html = $(this).html().replace(/(d*)/g,"<b>$1</b>");
$(this).html(html);
})
実行結果
<h2> 家賃相場 </h2> <p>東京都江戸川区 <span><b>55000</b></span>円</p> <p>東京都中野区 <span><b>80000</b></span>円</p> <p>東京都台東区 <span>150000</span>円</p> <p>東京都渋谷区 <span>250000</span>円</p> <p>東京都港区 <span>300000</span>円</p>
上記のサンプルのjQueryにて、$(this).text()が家賃の価格を表す数字を取得し、その値を’100000’と比較するif文を用意して条件が合わない場合は「return false」をしています。
東京都台東区は15万なので、上の条件に合致せずeachメソッドの繰り返し処理が終了して結果的に太字になっていないことが確認できるかと思います。このように終了する条件と併用してreturn falseを記述することで、eachメソッドの繰り返し処理を終了することが可能です。
繰り返し処理を途中でスキップする方法
では、逆に繰り返し処理を途中でスキップするにはどうしたら良いでしょうか？
その際は、先ほどの途中で処理を終了させる方法とは逆に、return true を記述します。こちらも具体的なサンプルで確認しましょう。先ほどのHTML文のサンプルに対して、家賃の相場が10万から26万の間のデータを太字にする処理をjQueryのeachメソッドにて行うとします。
[HTML]
<h2> 家賃相場 </h2> <p>東京都江戸川区 <span>55000</span>円</p> <p>東京都中野区 <span>80000</span>円</p> <p>東京都台東区 <span>150000</span>円</p> <p>東京都渋谷区 <span>250000</span>円</p> <p>東京都港区 <span>300000</span>円</p>
[jQuery]
$('p span').each(function(){
if($(this).text() < 100000 || $(this).text() > 260000) return true;
var html = $(this).html().replace(/(d*)/g,"<b>$1</b>");
$(this).html(html);
})
実行結果
<h2> 家賃相場 </h2> <p>東京都江戸川区 <span>55000</span>円</p> <p>東京都中野区 <span>80000</span>円</p> <p>東京都台東区 <span><b>150000</b></span>円</p> <p>東京都渋谷区 <span><b>250000</b></span>円</p> <p>東京都港区 <span>300000</span>円</p>
jQuery内で今度は「return true」と記述している点に注目してください。
if文の条件にて、価格が10万未満もしくは26万以上の場合は「return true」で、後続の処理（太字に変える処理）をスキップして次の要素にeacheメソッドの処理が移ります。
コールバック関数内でreturnする値をfalse/trueで使い分けることによって、繰り返し処理を終了したり途中でスキップしたりすることができますのでぜひ覚えておいて下さい。
まとめ
本記事ではjQueryのeachメソッドついてご紹介しました。jQueryオブジェクトに対する繰り返し処理を行うには$(…).each(処理内容)という形で実装するのでした。
また、繰り返し処理を終了させたり、途中でスキップしたりするには、return文でfalse/trueを返すことで実現できました。そして、配列オブジェクトに対して繰り返し処理を行うには $.eachを利用するのでした。
もし今後、eachメソッドに関して迷うことがあれば、ぜひこの記事を思い出して下さいね。
