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

jQueryのループ処理を行うサンプルです。
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-16行目は、テキストボックスの数分ループしてvalue値を配列にセットしています。

 

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は、エレメントです。
21行目はインデックスの値を配列にセットしています。
22行目はエレメントのvalue値を配列にセットしています。

 

eachメソッド

  • jQueryのeachメソッドです。
  • 各々の対象に対して引数に設定した関数の処理を行います。
  • 以下はjQueryサイトの.each()メソッドのページです。
    http://api.jquery.com/each/

関連の記事

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

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る