jQuery バリデーション - map() メソッド

インスタンス

フォーム内のすべての値のリストを構築します:

$("p").append($("input").map(function(){}
  return $(this).val();
).get().join(", ") );

自分で試してみてください

定義と使用法

map() は、各要素を関数を通じて現在のマッチングセットに渡し、返り値を含む新しい jQuery オブジェクトを生成します。

文法

.map(callback(index,domElement))
パラメータ 説明
callback(index,domElement) 現在のセットの各要素に対して呼び出される関数オブジェクト。

詳細説明

戻り値が jQuery エンキャップされた配列であるため、get() を使用して戻り値オブジェクトを処理し、基本的な配列を取得します。

.map() メソッドは、要素セットの値を取得または設定するのに特に役立ちます。以下に一連のチェックボックスを持つフォームを考えてみてください:

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>

チェックボックス ID からなるカンマ区切りのリストを取得できます:

$(':checkbox').map(function() {
  return this.id;
).get().join(',');

自分で試してみてください

この呼び出しの結果は文字列「two,four,six,eight」です。

callback 函数内部、this 引用は各イテレーションの現在の DOM 要素を参照します。この関数は、単一のデータアイテムまたは結果セットに挿入されるデータアイテムの配列を返すことができます。配列が返された場合、配列内の要素はセットに挿入されます。null または undefined が返された場合、要素は挿入されません。