2022年04月24日

jquery：each(func)

このメソッドの説明

jQueryの each(func) は、セレクタ要素が複数存在する場合に、それらを1個ずつ呼び出して処理します。

メソッド

セレクタ.each(function(index, element) {セレクトした要素に対する処理})

パラメータ

index（整数）(省略可)

インデックス変数名

element（要素）(省略可)

要素の変数名

メモ

①index及びelement名には自由な名前が付けられます　例）function(n,e)

②indexだけを指定した場合　例）function(n)

この場合、要素はthisで取得します。

③パラメータ指定を省略した場合　例）function()

この場合、要素はthisで取得します。

返り値

ありません

利用例

1.基本系の解説

[HTMLのサンプル]

このメソッドは下記の様に[test]クラスが複数存在する時に利用します。

<div class='test'>項目1</div>
<div class='test'>項目2</div> 
<div class='test'>項目3</div>

上記を実行すると下記が表示されます。

[jqueryサンプル]

上記のHTMLを下記のjQueryで処理します。

$(function(){ 
  var get_item = [];             // 配列の設定
  $('.test').each(function() { 
     get_item.push($(this).text());  // 発見したテキスト値を配列に追加
  }); 
  console.log(get_item);          // 配列を出力
  console.log(get_item.join()); // 上記をテキストに変換して出力
});

■コンソールに下記が表示されます。

・配列

(3) ["項目1", "項目2", "項目3"]

・テキスト値

項目1,項目2,項目3

2.マルチセレクトの事例

下記のマルチセレクトを操作して下さい。選択したテキスト値が表示されます。

PCの場合の複数値の選択は[Ctrlキー]を挿入してクリックします。

上記のプログラムは下記から構成されています。

<HTML>

<select name='multi_name' class='multi_class' multiple > 
	<option value='1'>項目1　　</option> 
	<option value='2'>項目2</option> 
	<option value='3'>項目3</option> 
	<option value='4'>項目4</option> 
</select>
<div style='display:flex;'>
	<button class='multi_check' style='margin-top:10px;'>選択確認</button>
	<button class='multi_initial' style='margin-top:10px;margin-left:10px;'>初期値</button>
</div>
<div class='multi_message' style='color:red;'></div>

<jQuery>

上記のHTMLを下記のjQueryで処理します。

$(function(){
	$('.multi_check').click(function(){     // 選択確認ボタンが挿入されてた時の処理
        var get_item = [];
        $('.multi_class option:selected').each(function(){
           get_item.push($(this).text()); // セレクトされた要素のテキストを配列に追加
        })
        var select_data = get_item.join(); // 配列をテキストに変換する
        $('.multi_message').text('選択値=' + select_data);　// 画面に表示する
	});
	$('.multi_initial').click(function(){   // 初期化ボタンが挿入されてた時の処理
		$('.multi_class').val('');             // 選択値のリセット
		$('.multi_message').text('');      // メッセージエリアのクリア
	});
});

■2～9行目：選択確認の処理

3行目：選択値を取り出す配列を定義しています。

4～6行目：選択値を取得して上記の配列に入れています。

7～8行目：配列をテキスト化して画面に表示しています。

■10～13行目：リセットの処理

11行目：選択値をリセットしています。

12行目：メッセージエリアをリセットしています。

参考情報

each(func) と同じような動きをする map(func) というメソッドがあります。

下記にその違いとポイントを解説します。

①each(func)の場合

var get_item = [];
$('.multi_class option:selected').each(function(){
   get_item.push($(this).text()); // セレクトされた要素のテキストを配列に追加
})
 var select_data = get_item.join(); // 配列をテキストに変換する
 $('.multi_message').text('選択値=' + select_data);　// 画面に表示する

■each(func)は単純にループを回すだけです。

よって複数の選択値を取り出すためには配列を定義し、そこにJavaScriptの push() で追加します。

■尚、取り出した選択値の配列をテキスト化する為にはJavaScriptの join() を利用します。

②map(func)の場合

var select_item = $('.multi_class option:selected').map(function(){
   return($(this).text());  // セレクトされた要素のテキストを戻す
})
var select_data = select_item.get().join(); // jQueryオブジェクトから選択値を取り出してテキストに変換する
$('.multi_message').text('選択値=' + select_data);　// 画面に表示する

■map(func)はループを回した結果を jQueryオブジェクトに登録します。

■jQueryオブジェクトを配列にするには get()メソッドを利用します。

■尚、取り出した選択値の配列をテキスト化する為にはJavaScriptの join() を利用します。