jQuery逆引きリファレンス
配列の内容を順番に処理するには？（$.each）
$.eachメソッドを使って、配列やオブジェクトの内容を順に処理する方法を解説。またJavaScriptのevery／someメソッドを、jQueryの$.eachで代替する方法も説明する。
配列の内容を順に処理するのは、$.eachメソッドの役割です。標準のJavaScriptにも同等のメソッドとしてforEachがありますが、Internet Explorerではバージョン9以降での動作が前提です。Internet Explorer 8以前の環境を想定しなければならない状況がまだまだあることを考えると、現時点では、$.eachメソッドを利用するのが無難でしょう。
$.eachメソッドの基本
まずは、基本的な例を見ていきます。以下は、オブジェクト配列（メンバーリスト）を読み取り、<ul>／<li>リストとして出力する例です。ただし、age（年齢）プロパティの値が40以上のメンバーが見つかったところで、出力を停止します。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<ul id="result"></ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
// 処理対象のオブジェクト配列
var members = [
{ name: '山田理央', age: 17, sex: 'female' },
{ name: '鈴木真琴', age: 24, sex: 'male' },
{ name: '佐藤健一', age: 45, sex: 'male' },
{ name: '木下奈美', age: 29, sex: 'female' },
{ name: '天童赤根', age: 35, sex: 'female' }
];
// 配列membersを順に処理
$.each(members,
function(index, elem) {
// 年齢が40以上のメンバーが見つかったところで出力停止
if (elem.age >= 40) { return false; }
// メンバー情報を「名前（年齢）」の形式でリストに整形
$('<li></li>')
.append(elem.name + '（' + elem.age + '）')
.appendTo('#result');
}
);
});
</script>
</body>
</html>
|
$.eachメソッドの構文は、以下の通りです。
［構文］$.eachメソッド
……配列要素に対する任意の処理……
})
コールバック関数の条件は、以下の通りです。
- 引数としてインデックス番号（＝
index）、要素値（＝elem*1）を受け取る - 戻り値として
falseを返した場合、以降の処理を中断（いわゆるbreak） false以外の値を返した場合は、現在のループをスキップ（いわゆるcontinue）
- *1 要素値には
thisキーワードでもアクセスできます。
サンプルでは、age（年齢）プロパティの値が40以上の場合にfalseを返すようにしていますので、40以上の要素である「佐藤健一」で処理を中断しています。試しに太字部分を以下のように書き換えてみると、結果が変わります。
|
if (elem.age >= 40) { return true; }
|
果たして、age（年齢）プロパティの値が40未満のメンバーが全て出力されていることが確認できます。
なお、ここでいう戻り値falseには、いわゆるfalsyな値（＝falseと見なされる値）は含まれない点に注意してください。例えば、空文字列や数値0、NaN、null、undefinedなどは全てfalse以外の値と見なされます。
オブジェクトを処理する方法
$.eachメソッドの第1引数には、配列の代わりにオブジェクトを指定することもできます。例えば以下は、オブジェクトの内容を「プロパティ名:値」の形式でリスト表示する例です。
|
var member = { name: '山田理央', age: 17, sex: 'female' };
$.each(member,
function(key, elem) {
$('<li></li>')
.append(key + ':' + elem)
.appendTo('#result');
}
);
|
オブジェクトを処理する場合、コールバック関数には「インデックス番号と要素値」の代わりに、「プロパティ名（＝key）とその値（＝elem）」が渡される点に注目です。
補足：every／someメソッドの代替
JavaScriptには、配列が特定の条件を満たすかを判定するために、以下のメソッドが用意されています。
| メソッド | 概要 |
|---|---|
| every | 配列の全ての要素が、ある条件に合致するか |
| some | 配列に、条件に合致する要素が1つでもあるか |
jQueryでは、これらのメソッドを直接に代替するメソッドはありませんので、$.eachメソッドを利用する必要があります。例えば、以下は配列の中にage（年齢）プロパティの値が50以上のメンバーが1人もいない（＝全てのメンバーの年齢が50未満である）ことを確認するコードです。いわゆるeveryメソッドを代替する例です。
|
$(function() {
// 処理対象のオブジェクト配列
var members = [
{ name: '山田理央', age: 17, sex: 'female' },
{ name: '鈴木真琴', age: 24, sex: 'male' },
{ name: '佐藤健一', age: 45, sex: 'male' },
{ name: '木下奈美', age: 29, sex: 'female' },
{ name: '天童赤根', age: 35, sex: 'female' }
];
var result = true; // フラグ変数
$.each(members,
function(index, elem) {
// 年齢が50以上の要素があった場合、変数resultをfalseに
if (elem.age >= 50) {
result = false;
return false;
}
}
);
if (result) { window.alert('全てのメンバーは50歳未満です。'); }
});
|
変数resultは、配列内の要素が条件を満たしているかどうかを表すフラグです。ここでは、$.eachメソッドの中で条件に反する（＝ageプロパティの値が50以上である）要素が見つかった場合に、変数resultをfalseとしています。つまり、$.eachメソッドを抜けた時に変数resultがtrueであれば、「全ての要素が条件を満たしていたこと」を意味します。
もしも年齢が1人でも50以上のメンバーがいることを確認したいならば、太字の部分を以下のように書き換えます。いわゆるsomeメソッドの例です。
|
var result = false;
$.each(members,
function(index, elem) {
if (elem.age >= 50) {
result = true;
return false;
}
}
);
if (result) { window.alert('50歳以上のメンバーがいます。'); }
|
今度はフラグ変数resultの初期値をfalseとしておきます。その上で、$.eachメソッドの中で条件に合致する（＝ageプロパティの値が50以上である）要素が見つかった場合に、変数resultをtrueとします。つまり、$.eachメソッドを抜けた時に変数resultがfalseのままであれば、「配列には1つも条件を満たした要素がなかったこと」を意味します。
処理対象：オブジェクトの操作 カテゴリ：トラバーシング（選択系の操作）
処理対象：JavaScriptのevery／someメソッドの代替 カテゴリ：ユーティリティ
API：jQuery.each() カテゴリ：Utilities（ユーティリティ）
※以下では、本稿の前後を合わせて5回分（第9回～第13回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
9. 要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）
任意の要素に対して幅／高さを設定／取得する方法を解説。また、height／width、innerHeight／innerWidth、outerHeight／outerWidthメソッドの使い分け方法も説明する。
10. 変数の型情報を判定するには？（$.isXxxxx／$.type）
$.isXxxxxメソッドを使って、変数のデータ型を判定する方法を解説。また、$.typeメソッドを使って、引数で指定されたオブジェクトの型を文字列として返す方法も解説する。
11. 【現在、表示中】≫ 配列の内容を順番に処理するには？（$.each）
$.eachメソッドを使って、配列やオブジェクトの内容を順に処理する方法を解説。またJavaScriptのevery／someメソッドを、jQueryの$.eachで代替する方法も説明する。
12. 配列の内容を順番に加工するには？（$.map）
$.mapメソッドを使って、配列やオブジェクトの内容を順に加工する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのmapメソッドをこれで代替しよう。
13. 配列から特定の条件で要素を取り出すには？（$.grep）
$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。
