ywork2020.com

Title

イーチメソッドを使えば、指定した項目の全データを読み込むことができる

eachメソッドの概要

eachメソッドは配列に対して繰り返し処理を行うことができるメソッドです。
要素配列や変数配列などに対して、インデックスの0からスタートして値が存在する限り、処理を繰り返すことになります。

実機サンプル

サンプルリスト: id="idList"

実行:
答え: id="idAnswer"

innerHTML

サンプルコード

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<select id="idList">
		<option value="リスト1">リスト1</option>
		<option value="リスト2">リスト2</option>
		<option value="リスト3">リスト3</option>
	</select>
	<p id="idAnswer">innerHTML</p>
	<script>
		let arrList = new Array();
		$("#idList option").each(function(numIndex,objElement){
			arrList.push(objElement.value);
		});
		$("#idAnswer").html("");
		$.each(arrList,function(numIndex){
			$("#idAnswer").html($("#idAnswer").html()+numIndex+' : '+arrList[numIndex]+'<br>');
		});
	</script>
</body>
サンプルコードではボダンがクリックされた時の処理は、混乱をさける為に掲載していません。
ボタンがクリックされたらscript要素の中のコードが実行されると思って下さい。

eachメソッドのサンプルコードの要点

まず、jQueryの観点から、なるべく端的に要点をまとめてみます。
  1. 「#idList」の子要素内から「option要素」の配列を取得して、配列の全てのvalue値をarrList配列に代入します。(繰り返し処理)
  2. eachメソッドでarrList配列の全ての値を「#idAnswer」に書き込んでいきます。(繰り返し処理)
次に少しややこしいですがjavascriptの用語も交えてscript要素のコード内について、要点をまとめていきます。
  1. 変数配列「arrList」を定義するために「new Array()」コンストラクタを使ってインスタンスを生成します。
  2. 今回はfunctionで関数を2つ作成しました。
  3. まず1目の関数は、セレクター「#idList option」にeachメソッド使い、id属性="idList"の配下であるoption要素の配列を取得して、 その要素のvalue値を「arrList」配列に代入していきます。
  4. 2つ目の関数は、セレクター無しで、直接のeachメソッド(関数)を使い、前項の「arrList」配列から1つずつ配列値を取り出しながら jQueryのセレクター("#idAnswer")を指定して、HTML要素のid属性="idAnswer"に対してjQueryのhtmlメソッドでjavascriptでいうところのinnerHTMLプロパティに「arrList」の値を代入しています。

サンプルコードの補足

今回は、内容が少し複雑になったかもしれません。
関連リンクを参照していただかると分りやすいかもしれませんが、 とりあえずのところで、eachメソッドを使う時にセレクターからeachメソッドを使って要素の配列を操作している場合と、 セレクター無しで直接のeachメソッドを使って変数配列を操作している2つの使用パターンの違いに着目していただけると良いと思います。