jquery：map(func)

このメソッドの説明

jQueryの map(func) は、セレクタ要素が複数存在する場合にそれらを1個ずつ呼び出し処理した結果を jQueryオブジェクトとして返します。

 

---

メソッド

変数　=　セレクタ.map(function(index, element) {return 取り出したい要素を指定})

 

---

パラメータ

index（整数）(省略可)

インデックスの変数名

element（要素）(省略可)

要素の変数名

 

---

返り値

セレクトした要素のjQueryオブジェクトデータ

 

---

利用例

1.基本系の解説

[HTMLのサンプル]

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

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

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

 

[jQueryサンプル]

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

$(function(){
	var text_array = $('.test').map(function() {　// testクラスのtextデータを取得してtext_arrayに入れる
		return ($(this).text());
	});
	console.log(text_array);         　　　// ①jQueryオブジェクトとして出力
    console.log(text_array.get());          // ②jQueryオブジェクトを配列に変換して出力
    console.log(text_array.get().join()); // ③配列をテキストに変換して出力
});

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

①jQueryオブジェクト

n.fn.init(3) ["項目1", "項目2", "項目3", prevObject: n.fn.init(3), context: document]

②配列

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

③テキスト値

項目1,項目2,項目3

 

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

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

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

項目1　　項目2項目3項目4 選択確認 初期値

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

①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

$(function(){
	$('.multi_check').click(function(){     // 選択確認ボタンが挿入されてた時の処理
		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);　// 画面に表示する
	});
	$('.multi_initial').click(function(){   // 初期化ボタンが挿入されてた時の処理
		$('.multi_class').val('');             // 選択値のリセット
		$('.multi_message').text('');      // メッセージエリアのクリア
	});
});

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

3～5行目：選択値をjQueryオブジェクトに取得しています。

6行目：jQueryオブジェクトを get()メソッド で配列にし  join() でテキスト化してます。

7行目：画面に表示しています。

■9～12行目：リセットの処理

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

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

 

---

参考情報

map(func)と同じような動きをする each(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() を利用します。