jQuery ループ処理を行うサンプル(each)

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

eachメソッドのサンプル(引数なし)
eachメソッドのサンプル(引数あり)
eachメソッド

eachメソッドのサンプル(引数なし)

ボタン1を押すとテキストボックスの数分eachメソッドでループして、テキストボックスのvalue値を取得します。

選択した色

コード

上記サンプルのコードです。

<p>選択した色 <span id="span1"></span></p>
<input type="text" class="text1" value="赤" maxlength="5">
<input type="text" class="text1" value="青" maxlength="5">
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="クリア" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	const values = [];
	$("#button1").click(function() {
		values.length =0;

		$(".text1").each(function() {
			values.push($(this).val());
		});
		$('#span1').text(values);
	});

	$("#button2").click(function() {
		$('#span1').text("");
	});
});
</script>

14行目は、eachメソッドで、テキストボックスの数分、関数を実行します。
15行目は、valメソッドで要素のvalue値を取得しています。
$(this)はオブジェクトです。以下は、console.log($this)で確認したものです。
矢印をクリックすると項目が下に展開されます。

eachメソッドのサンプル(引数あり)

ボタン1を押すとテキストボックスの数分eachメソッドでループして、テキストボックスのvalue値を取得します。
eachメソッドの引数も追加して確認します。

選択した色

コード

上記サンプルのコードです。

<p>選択した色 <span id="span2"></span></p>
<input type="text" class="text2" value="赤" maxlength="5">
<input type="text" class="text2" value="青" maxlength="5">
<input type="button" id="button3" value="ボタン2" />
<input type="button" id="button4" value="クリア" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	const values = [];
	const a1 = [];
	const b1 = [];

	$("#button3").click(function() {
		values.length =0;
		a1.length =0;
		b1.length =0;

		$(".text2").each(function(a,b) {
			values.push($(this).val());
			a1.push(a);
			b1.push($(b).val());
		});
		$('#span2').text
			("value=" + values +
			 " インデックス=" + a1 +
			 " 要素のvalue値=" + b1);
	});
	$("#button4").click(function() {
		$('#span2').text("");
	});
});
</script>

19行目の引数aは、数値のインデックスです。インデックスは0から始まります。
19行目の引数bは、エレメントです。
20行目はvalue値を配列にセットしています。
21行目はインデックスの値を配列にセットしています。
22行目はエレメントのvalue値を配列にセットしています。20行目と同じ値です。

eachメソッド

jQueryのeachメソッドです。
一致する要素ごとに、関数を繰り返して実行します。
以下はjQueryサイトの.each()メソッドのページです。
http://api.jquery.com/each/