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

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

eachメソッド

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

サンプル 

eachメソッドを使用したサンプルです。
ボタン1を押すと、eachメソッドを使用して各テキストボックスの値を表示します。
ボタン2を押すと、eachメソッドを使用して各テキストボックスのインデックスを表示します。
ボタン3を押すと、eachメソッドを使用して各テキストボックスの値とインデックスを表示します。
リセットを押すと、表示を元に戻します。

値:

インデックス:





コード

上記サンプルのコードです。
16-18行目は、eachメソッドで59-61行目のテキストボックスの数分ループを回し、value値を取得し配列にセットしています。
27行目は、eachメソッドの後のfunctionの後に引数aがあります。これはインデックスです。インデックスは0から始まります。
39行目は、eachメソッドの後のfunctionの後に引数a,bがあります。これはインデックスとエレメントです。インデックスは0から始まります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	var index = [];
	var values = [];

	// ボタン1を押したとき
	$("#id1").click(function() {
		values.length =0;
		// 場所1.
		$('.num').each(function() {
			values.push($(this).val());
		});
	
		$('#out1').text(values);//11,22,33
	});

	// ボタン2を押したとき
	$("#id2").click(function() {
		index.length =0;
		// 場所2.$( セレクタ ).each(function(インデックス)
		$('.num').each(function(a) {
			index.push(a);
		});

		$('#out2').text(index);	//0,1,2
	});

	// ボタン3を押したとき
	$("#id3").click(function() {
		values.length =0;
		index.length =0;
		// 場所3.$( セレクタ ).each(function(インデックス, エレメント)
		$('.num').each(function(a,b) {
			index.push(a);
			values.push($(b).val());
		});

		$('#out2').text(index);	//0,1,2
		$('#out1').text(values);	//11,22,33

	});
	// ボタン4を押したとき
	$("#id4").click(function() {
		$('#out1').text("");
		$('#out2').text("");
	});
});
</script>
</head>
<body >
<p>値:<span id="out1"></span></p>
<p>インデックス:<span id="out2"></span></p>
<input type="text" class="num" value="11">
<input type="text" class="num" value="22">
<input type="text" class="num" value="33"><br/>
<input type="button" id="id1" value="ボタン1" /><br/>
<input type="button" id="id2" value="ボタン2" /><br/>
<input type="button" id="id3" value="ボタン3" /><br/>
<input type="button" id="id4" value="リセット" /><br/>
</body>
</html>

関連の記事

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



△上に戻る