デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
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は以下の様な構文になっています。まず引数を2つ(インデックス番号, セレクタの要素)を受け取ります。これらの引数の値は{}内の処理で利用することができます。セレクタに含まれている要素ごとに処理を実行できます。処理の途中で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メソッドを利用してください。