jQuery 繰り返し処理を行うサンプル(each)

jQueryのループで繰り返し処理を行うサンプルです。
eachメソッドを使用します。

目次

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

DOM要素.each (function(インデックス,要素))
  • リスト項目などのDOM要素に対して処理を繰り返します。
  • 以下は、jQueryのeachのリンクです。
    https://api.jquery.com/each/

コード

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

<ul>
  <li>赤</li>
  <li>黄</li>
  <li>青</li>
</ul>

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

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

1~5行目は、HTMLの要素(DOM要素)です。
10行目は、eachメソッドです。引数のaはインデックスでbは値になります。要素の数分ループで処理を繰り返します。
11行目は、引数のaとbの値をコンソールに表示します。aの値はインデックスなので0から始まります。
12行目は、thisを使用しています。11行目と同じ出力結果になります。thisを使用する場合10行目の引数bは不要です。

配列を繰り返し処理する

.each(配列,function(インデックス,要素))

コード

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

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

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

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

3行目は、配列です。要素が3つあります。
10行目は、eachメソッドです。引数のaはインデックスでbは値になります。要素の数分ループで処理を繰り返します。
11行目は、引数のaとbの値をコンソールに表示します。aの値はインデックスなので0から始まります。

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

.each(オブジェクト,function(インデックス,要素))

コード

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

<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) {
		console.log( a + ": " + b);
	});
});
</script>

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

3~7行目は、オブジェクトです。
10行目は、eachメソッドです。引数のaはプロパティ名(キー)でbは値になります。要素の数分ループで処理を繰り返します。
11行目は、引数のaと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 属性値を取得/設定するサンプル(attr)
jQuery textメソッドとhtmlメソッドの違いのサンプル
jQuery 子孫要素を検索するサンプル(find)
jQuery 指定のイベント発生時に一度だけ実行するサンプル(one)
jQuery Deferredオブジェクトのサンプル
jQuery 1つの要素に複数のイベントリスナを登録するサンプル(on)

△上に戻る