jQuery 繰り返し処理を行う(each)

jQueryのeachメソッドは、DOM要素、配列、オブジェクトに対して繰り返し処理が出来ます。

目次

DOM要素 DOM要素を繰り返し処理する
  DOM要素に採番したIDを割り振る
配列 配列を繰り返し処理する
オブジェクト オブジェクトを繰り返し処理する
break 繰り返し処理を途中で抜ける(for文のbreak)
continue 繰り返し処理を途中でスキップする(for文のcontinue)

DOM要素を繰り返し処理する

DOM要素を繰り返し処理するサンプルです。

$("td").each(function (a, b) {
   // 繰り返す処理
});

上記例は、DOM要素(タグ)の「td」に対して処理を繰り返します。
eachメソッドは、2つの引数があります。1つめはインデックスで2つめは要素です。

上記例を使用したサンプルです。
11行目で使用しています。

<table>
	<tr>
		<td>赤</td>
		<td>黄</td>
		<td>青</td>
	</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
	$(function () {
		$("td").each(function (a, b) {
			console.log(a + ": " + $(b).text());
			//console.log( a + ": " + $(this).text());
		});
	});
</script>

11行目のeachメソッドのセレクタの「td」は、3~5行目のtdタグを指します。
この場合、3~5行目まで順に繰り返します。

12行目の出力結果は以下のとおりです。
0: 赤
1: 黄
2: 青

このときの1つめの引数のaは、インデックスで0から2まで出力されます。
2つめの引数のbは、要素でtdタグの間にある赤、黄、青が出力されます。

12行目は、$(this)を使用しています。11行目と同じ出力結果になります。
$(this)を使用する場合11行目の引数bは不要です

DOM要素に採番したIDを割り振る

上記のeachメソッドの仕様を利用してDOM要素に採番したIDを割り振ることが出来ます。

<table>
	<tr>
		<td>赤</td>
		<td>黄</td>
		<td>青</td>
	</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
	$(function () {
		let i = 1;
		$("td").each(function () {
			$(this).attr("id","test"+i);
			i++;
		});
	});
</script>

12行目は、eachメソッドです。処理を繰り返します。
13行目は、attrメソッドで、要素のtdタグに属性のidと属性値の文字列と数値を割り当てています。
実行結果は、以下のとおりです。
各タグにid="test数値"が付与されています。

※tbodyはコードに記述していませんが勝手に追加されます。

 

配列を繰り返し処理する

配列を繰り返し処理するサンプルです。

$.each(array1,function(a,b) {
   // 繰り返す処理
});

上記例は、配列の変数array1に対して、配列の要素1つずつ処理を行っていきます。
$(#a1)というようなセレクタの指定はありません。

2つの引数があります。1つめはインデックスで2つめは要素です。

上記例を使用したサンプルです。
6行目で使用しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
const array1= ["赤","黄","青"];

$(function() {
	$.each(array1,function(a,b) {
		console.log( a + ": " + b);
	});
});
</script>

6行目は、eachメソッドで1つ目の引数にある配列の要素の数分を順に見ていきます。
7行目の出力結果は以下のとおりです。
0: 赤
1: 黄
2: 青

このときの1つめの引数のaは、インデックスで0から2まで出力されます。
2つめの引数のbは、配列の値である赤、黄、青が出力されます。

 

オブジェクトを繰り返し処理する

オブジェクトを繰り返し処理するサンプルです。

$.each(object1,function (a, b) {
   // 繰り返す処理
});

上記例は、オブジェクトの変数objct1に対して、1つずつ処理を行っていきます。
$(#a1)というようなセレクタの指定はありません。

2つの引数があります。1つめはインデックスで2つめは要素です。

上記例を使用したサンプルです。
9行目で使用しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
const object1= {
	1:"赤",
	2:"黄",
	3:"青",
}
$(function() {
	$.each(object1,function(a,b) {
		console.log( a + ": " + b);
	});
});
</script>

9行目は、eachメソッドで1つ目の引数にあるオブジェクトの値を順に見ていきます。
10行目の出力結果は以下のとおりです。
1: 赤
2: 黄
3: 青

このときの1つめの引数のaは、インデックスで0から2まで出力されます。
2つめの引数のbは、配列の値で赤、黄、青が出力されます。

 

繰り返し処理を途中で抜ける(for文のbreak)

return false;

eachメソッドは、繰り返し処理の途中、return falseでループを抜けることができます。
JavaScriptのfor文のbreakにあたります。

コード

繰り返し処理を途中で抜けるサンプルです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
const obj1 = {
	1:"赤",
	2:"黄",
	3:"青",
}
$(function() {
	$.each(obj1,function(a,b) {
		if(b==="黄"){
			return false;
		}
		console.log( a + ": " + b); //1: 赤
	});
});
</script>

3~7行目は、オブジェクトです。
11行目は、return falseです。ここでeachメソッドのループ処理を抜けます。
13行目は、配列の1つめの要素のみ表示されます。

 

繰り返し処理を途中でスキップする(for文のcontinue)

return;

eachメソッドの繰り返し処理の途中、returnでスキップすることができます。
JavaScriptのfor文のcontinueにあたります。

コード

繰り返し処理の途中でスキップするサンプルです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
const obj1 = {
	1:"赤",
	2:"黄",
	3:"青",
}
$(function() {
	$.each(obj1,function(a,b) {
		if(b==="黄"){
			return;
		}
		console.log( a + ": " + b); //1: 赤 3: 青
	});
});
</script>

3~7行目は、オブジェクトです。
11行目は、returnです。ここでeachメソッドのループの先頭に戻ります。
13行目は、配列の1つめと3つめの要素のみ表示されます。

以下は、jQueryのeachのリンクです。2種類あります。
https://api.jquery.com/each/
https://api.jquery.com/jquery.each/

関連の記事

jQuery 属性値を取得/設定/削除する(attr/removeAttr)
jQuery textメソッドとhtmlメソッドの違いのサンプル
jQuery 子要素を検索して操作する(find)
jQuery 指定のイベント発生時に一度だけ実行するサンプル(one)
jQuery Deferredオブジェクトのサンプル
jQuery 1つの要素に複数のイベントリスナを登録するサンプル(on)

△上に戻る