初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
Core：コアとなる仕組み
Selectors：セレクタ
Attributes：属性
Traversing：対象の変更
Manipulation：操作
CSS：スタイルシート
Events：イベント
Effects：演出効果
Ajax：xml等との連携
Utilities：ユーティリティ
Data：データ
Miscellaneous：諸々
Deferred：処理管理
Callbacks：コールバック
Internals：内部処理

jQuery.each( )配列などの要素を個別処理

構文

配列の要素を個別処理返値：配列
jQuery.each( array, function )ver1.0〜
引数に設定するfunctionは以下の引数を受け取ります
・第1引数：インデックス番号
・第2引数：要素の値
objectオブジェクトのプロパティを個別処理返値：objectオブジェクト
jQuery.each( object, function )ver1.0〜
引数に設定するfunctionは以下の引数を受け取ります
・第1引数：プロパティ名
・第2引数：プロパティの値

機能

jQuery.eachメソッドは第1引数に指定した配列（またはobjectオブジェクト）の各要素を個別に第2引数のfunctionで処理します。jQuery.eachメソッドは返値を返しますが、これは第1引数で受け取ったものを変更せずにそのまま返します。変更した結果を受け取りたい場合はjQuery.mapメソッドを利用してください。

第2引数のfunction内でfalseを返すと処理を中止します。またtrueを返すと現在の要素の処理をスキップします。

解説

配列の各要素を個別に処理する

サンプル（each/01.html）を開いてbody内にbutton要素しかないことを確認して下さい。jQueryは、まず以下の部分を確認してください。buttonをクリックするとjQuery.eachメソッドを利用して第1引数に設定した配列の2つの要素をeachFuncで個別に処理します。 

$("button").click(function(){
	$.each([123, "abc"], eachFunc);
});

jQuery.eachメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数を２つ（インデックス番号, 要素の値）を受け取ります。この引数の順番は$.mapメソッドと逆なので、紛らわしいです...

これらの引数の値は｛｝内の処理で利用することができ、セレクタに含まれている要素ごとに処理を実行できます。処理の途中でfalseを返すと、その時点でjQuery.eachメソッドの処理を中断します。trueを返すと現在処理している要素の処理だけをスキップします。またreturnは設定しなくても問題ありません。

jQuery.eachに設定するFunctionの構文（配列を処理する場合）
function 任意の名前(インデックス番号, 要素の値){
　任意の処理（引数を利用可能）
　return true/false;
}

サンプルeach/01.htmlで利用したeachFuncは以下の様になっており、appendメソッドを利用してbody要素内にインデックス番号と、その要素の値を追加します。 

function eachFunc (index, value){
	$("body").append(index + "番目の内容は" + value + "<br/>");
};

結果として、buttonをクリックするとbody要素内に配列のインデックス番号と、その要素の値が表示されます。第2引数のfunctionは無名関数にして直接設定することができます。→サンプル（each/01b.html） 

$("button").click(function(){
	$.each([123, "abc"], function (index, value){
		$("body").append(index + "番目の内容は" + value + "<br/>");
	});
});

objectオブジェクトの各プロパティを個別に処理する

jQuery.eachメソッドの第1引数に配列を設定した場合は前項のようにfunctionの引数として「インデックス番号」と「値」が渡されますが、第1引数にobjectオブジェクトを設定した場合はインデックス番号の代わりにプロパティ名、要素の値の代わりにプロパティの値が渡されます。

jQuery.eachに設定するFunctionの構文（objectオブジェクトを処理する場合）
function 任意の名前(プロパティ名, プロパティの値){
　任意の処理（引数を利用可能）
　return true/false;
}

サンプル（each/02.html）を開いてbody内の構成がeach/01.htmlと同じ事を確認してください。jQueryは以下の様に記述されjQuery.eachメソッドの第1引数に配列ではなくobjectオブジェクトが設定されています。 

$(function () {
	$("button").click(function(){
		$.each({aaa:123, bbb:"abc"}, eachFunc);
	});
});

eachFuncは変数名などが異なるだけで、処理的にはeach/01.htmlとまったく同じです。 

function eachFunc (prop, value){
	$("body").append(prop + "の内容は" + value + "
");
};

結果として、buttonをクリックするとobjectオブジェクトのプロパティ名と、その値が表示されます。

処理を途中で中断する

第2引数のfunction内でfalseを返すことで処理を中断できます。サンプル（each/03.html）を開いてbody内の構成がeach/01.htmlと同じ事を確認してください。jQueryは以下の様に記述されています。 

$("button").click(function(){
	$.each(myArray, eachFunc);
});

第1引数に設定された配列「myArray」は以下の様になっており、2番目の要素だけが数値ではなく文字列になっています（インデックス番号は0から始まるので、3番目ではなく2番目となります）。 

var myArray = [1,2,"aaa",4,5];

第2引数に設定されたfunction「eachFunc」は以下の様に記述されています。まず2行目のif文で否定演算子とjQUery.isNumericメソッドを利用して配列の値が数値でなかったら{}内の処理を実行するようにしています。

｛｝内ではappendメソッドを利用して、中断する旨を表示しreturnでfalseを返し、処理を中断します。 

function eachFunc (index, value){
	if(!$.isNumeric(value)){
		$("body").append("要素に数値以外が含まれていたので処理を中断しました<br/>");
		return false;
	}
	$("body").append(index + "番目の内容は" + value + "<br/>");
};

配列「myArray」は2番目の要素が数値ではないため、buttonをクリックすると0番目と1番目の処理は実行しますが、2番目以降の処理は実行されません。

処理をスキップする

第2引数のfunction内でtrueを返すことで現在の要素の処理だけスキップできます。サンプル（each/04.html）を開いてbody内の構成がeach/03.htmlと同じ事を確認してください。jQueryもeach/03.htmlとほとんど同じなのですが、以下の様にreturnでfalseではなくtrueを返すように変更してあります。 

function eachFunc (index, value){
	if(!$.isNumeric(value)){
		$("body").append("要素に数値以外が含まれていたので処理をスキップしました<br/>");
		return true;
	}
	$("body").append(index + "番目の内容は" + value + "<br/>");
};

trueを返すと中断ではなく現在の処理だけをスキップするので、buttonをクリックすると2番目の処理だけがスキップされます。

関連項目

配列やobjectオブジェクトではなく、html内の要素（jQueryオブジェクト）について処理したい場合はTraversingのeachメソッドを利用してください。

処理した結果を返値として得たい場合はjQuery.mapメソッドを利用してください（jQuery.eachメソッドの返値は変更されません）。

メモ

jQuery.eachメソッドの返値は第1引数に設定したものと同じです

Traversingのeachメソッドはメソッドチェーンの途中で利用する際に、後続のメソッドに渡すjQueryオブジェクトを変更したくない時に便利です。逆に変更したjQueryオブジェクトを渡したい時はmapメソッドを利用します。つまりフィルタリングするか否かで使い分けます。

なのでjQuery.eachメソッドも返値と引数に設定したデータが同じか一応確認しました。
サンプル（each/test01.html）を開いてください。基になっているのは処理を中断するサンプルのeach/03.htmlです。変更した点は以下の部分で、jQuery.eachメソッドの返値を変数ansArrayで受け取り、myArrayと比較した結果をアラートで表示するようにしています。 

$("button").click(function(){
	var ansArray = $.each(myArray, eachFunc);
	alert(myArray == ansArray);
});

結果として、buttonをクリックすると「true」と表示されるので、やはり返値は変更されていないことが確認できます。これは対象が配列ではなくobjectオブジェクトの時も同じです。→サンプル（each/test01b.html）

ちなみにjQuery.mapメソッドはobjectオブジェクト処理した結果、配列に変換してしまいます。

少し実用的なサンプル

$.eachメソッドは元データを変更しないので、条件に合ったデータを表示する時などに利用します。サンプル（each/test02.html）を開いてjQueryを確認してください。

まず以下の様な配列データ（各要素はobjectオブジェクト）が作成されています。 

var myArray = [
	{name:"bob", sex:"male", age:18},
	{name:"meg", sex:"female", age:20},
	{name:"tom", sex:"male", age:22},
	{name:"beth", sex:"female", age:25},
	{name:"john", sex:"male", age:30}
];

そしてbuttonをクリックすると、以下の処理を行うようにしました。ポイントは2行目のif文で要素のsexプロパティが「female」の場合だけ、3行目の処理を行うようにしています。 

$.each(myArray, function(index, elem){
	if (elem.sex == "female"){
		$("body").append(elem.name + "<br/>");
	}
});

結果として、buttonをクリックするとmyArrayに登録されたデータの内、女性の名前（meg/beth）がappendメソッドによってbody内に表示されます。

このサンプルのように表示するのではなく、女性のデータのみを抽出してプログラム中で利用したい時は次ページのjQuery.mapメソッドを利用してください。
→リファレンス：jQuery.mapメソッド「少し実用的なサンプル」

元のデータは変更しません

$.eachメソッドはjQuery.mapメソッドやjQuery.grepメソッドと異なり、返値は変更されません。なので当然、元データも変更されないのですが念のため確認します。

サンプルサンプル（each/test03.html）を開いて、ほとんどeach/03.htmlと同じ事を確認してください。異なるのは以下の様に$.eachメソッドの実行前と後で配列「myArray」の内容を表示する処理を追加した点だけです。 

$("button").click(function(){
	$("body").append("each実行前："+myArray+ "<br/>");
	$.each(myArray, eachFunc);
	$("body").append("each実行前："+myArray+ "<br/>");
});

buttonをクリックして、実行前と後の内容を比較してください。変化していないことが確認できます。