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

.each( )選択された要素を個別処理

構文

選択された要素を個別処理返値：jQueryオブジェクト
jQo.each( function )ver1.0〜

機能

jQueryオブジェクトで指定した要素を引数で指定したfunctionで個別に処理します。返されるjQueryオブジェクトは変更されません。

解説

引数にfunctionを設定

サンプル（each/01.html）を開いてul要素にli要素が5つあることを確認して下さい。 

<ul>
	<li>list item 0</li>
	<li>list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
	<li>list item 4</li>
</ul>

jQueryは以下の様に記述されeachメソッドの引数にfunctionの「eachFunc」が設定されています。 

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

eachメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数を２つ（インデックス番号, セレクタの要素）を受け取ります。これらの引数の値は｛｝内の処理で利用することができます。セレクタに含まれている要素ごとに処理を実行できます。処理の途中でfalseを返すと、その時点でeachの処理を中断します。trueを返すと現在処理している要素だけをスキップします。またreturnは設定しなくても問題ありません。

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

サンプルeach/01.htmlで利用したeachFuncは以下の様になっており、セレクタで選択された5つのli要素に対してtextメソッドを利用し「〜番目の要素」と表示するようにしています。セレクタの要素elemは「DOM要素」のためtextなどjQueryのメソッドを利用する場合はjQueryメソッドを利用してjQueryオブジェクトにする必要があります。2行目で利用している引数のelemはthisに置き換えても機能します。 

function eachFunc(index, elem) {
	$(elem).text(index+"番目の要素");
}

結果としてbuttonをクリックすると、各li要素に「〜番目の要素」と表示されます。

途中でeachの処理を中止する

eachメソッドの引数に設定したfunction内でfalseをreturnすると、途中でeachの処理を中止することができます。サンプル（each/02.html）を開いてbody内の構成はサンプルeach/01.htmlと同じ事を確認してください。

jQueryはeachFuncが以下の様に変更され、（セレクタで選択されたli要素の）インデックス番号が2の要素の処理に入る時点でfalseをreturnしています。その結果インデックス番号2番目以降のli要素はeachFuncで処理されません。 

function eachFunc(index, elem) {
	if (index == 2) return false;
	$(elem).text(index+"番目の要素");
}

結果として、buttonをクリックすると0番目と1番目のli要素のテキストだけが変更されます。

ちなみにサンプル（each/02b.html）のようにreturnの位置をテキストを設定する処理の後に移動すれば、2番目のテキストを設定した後でeachFuncの処理を中止するので、2番目のli要素のテキストは変更されます。 

function eachFunc(index, elem) {
	$(elem).text(index+"番目の要素");
	if (index == 2) return false;
}

現在の要素だけ処理をスキップ

returnでtrueを返すと、現在処理している要素の処理だけをスキップします。サンプル（each/03.html）を開いてbody内の構成はサンプルeach/01.htmlと同じ事を確認してください。

jQueryはeachFuncがサンプルeach/02.htmlとほとんど同じで、falseではなくtrueを返すように変更しているだけです。その結果インデックス番号2番目のli要素だけ処理がスキップされます。 

function eachFunc(index, elem) {
	if (index == 2) return true;
	$(elem).text(index+"番目の要素");
}

結果として、buttonをクリックすると2番目のli要素だけテキストが変更されません。

返されるjQueryオブジェクトは変更されません

eachメソッドはjQueryオブジェクトで指定した要素を処理しますが、要素（返されるjQueryオブジェクト）は変更しません。つまりmapメソッドと異なりフィルタリングしません。

サンプル（each/04.html）を開いてbody内の構成とeachFuncはサンプルeach/02.htmlと同じことを確認してください。異なっているのはメソッドチェーンでeachメソッドの後にcssメソッドで文字の色を赤く変更している点です。 

$("button").click(function(){
	$("li").each(eachFunc).css("color","#f00");
})

結果としてbuttonをクリックすると、eachメソッドの処理は0番目と1番目のli要素しか処理しませんが、jQueryオブジェクトで指定した要素は変更されないためcssメソッドによってli要素すべてが文字色が赤く変更されます。

関連項目

htmlの要素ではなく純粋なデータ（配列/objectオブジェクト）の要素に対して個別に処理したい場合はUtilitiesのjQuery.eachメソッドを利用してください。

eachメソッドは受け取ったjQueryオブジェクトを変更しませんが、変更（フィルタリング）したい場合はmapメソッドを利用してください。