jQuery逆引きリファレンス
要素セットの内容を順に処理するには？（map）
jQueryオブジェクトで保持している要素セットを、1つずつ順番に処理し、その処理結果をjQueryオブジェクトとして取得できるmapメソッドの基本的な使い方を説明する。
mapメソッドは、現在の要素セット（jQueryオブジェクトで保持している要素群）を順番に処理し、その結果を配列（jQueryオブジェクト）として返します。
具体的な例も見てみましょう。例えば以下は、選択されたチェックボックスのテキストを取得する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
<p>
利用しているOS：<br />
<input type="checkbox" id="win" name="os" value="Windows" checked />
<label for="win">Windows</label>
<input type="checkbox" id="lin" name="os" value="Linux" />
<label for="lin">Linux</label>
<input type="checkbox" id="mac" name="os" value="macOS" checked />
<label for="mac">macOS</label>
</p>
<button type="button" id="btn">クリック</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(function() {
$('#btn').click(function() {
console.log(
$('[name="os"]:checked').
map(function(index, elm) {
var osValue = $(elm).attr('id');
return $('label[for="' + osValue + '"]').text();
}).
get().
join(' ')
);
});
});
</script>
</body>
</html>
|
mapメソッドに渡すコールバック関数のルールは、以下の通りです。
- 引数として「インデックス番号」「要素」を受け取ること
- 戻り値として、加工済みの値を返すこと
mapメソッドでは、要素セット配下の要素を順に取り出しながら、これをコールバック関数で処理し、その結果を配列に順にセットしていくわけです。mapメソッドの戻り値は、最終的な結果配列を含んだjQueryオブジェクトです（配列そのものではありません！）。
よって、もしも配列を取り出したい場合には、getメソッドを介する必要があります。この例では、getメソッドでチェックボックスに対応するラベルテキストを含んだ配列を取得できますので、Array#joinメソッドで値を連結し、その結果をログに出力しています。
［Note］thisでもアクセスできる
要素セットから取り出した要素にアクセスするのに、（コールバック関数の引数ではなく）$(this)を使っても構いません。
リストの太字部分は、以下のようにしても同じ意味です。
|
var osValue = $(this).attr('id');
|
なお、この例を見ても分かるように、mapメソッドの戻り値である配列（jQueryオブジェクト）は、必ずしも要素オブジェクトの配列でなくても構いません。この例であれば、mapメソッドで処理された結果は、単なる文字列の配列にすぎません。
API：.map() カテゴリ：Traversing（トラバーシング） > Filtering（フィルタリング）
※以下では、本稿の前後を合わせて5回分（第71回～第75回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
71. 親子／兄弟関係にある要素を行き来するには？（parents／parent／prev／prevAll／next／nextAll／siblings／children）
parents／parent／prev／prevAll／next／nextAll／siblings／children／endメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、ツリー構造において親子／兄弟関係にある要素を取得する方法を説明する。
72. 現在の要素から指定された祖先／兄弟要素までを取得するには？（prevUntil／nextUntil／parentsUntil）
prevUntil／nextUntil／parentsUntilメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、現在の要素の直後から、ツリー構造において（指定された）兄／弟／親の関係にある要素の直前までの範囲にある全要素を取得する方法を説明する。
73. 【現在、表示中】≫ 要素セットの内容を順に処理するには？（map）
jQueryオブジェクトで保持している要素セットを、1つずつ順番に処理し、その処理結果をjQueryオブジェクトとして取得できるmapメソッドの基本的な使い方を説明する。
74. 要素セットから指定の条件に合致したものを取り除くには？（not）
jQueryオブジェクトで保持している要素セットから、指定条件に合致しない要素のみを取得できるnotメソッドの基本的な使い方を説明する。
75. 現在の要素セットからm～n番目の要素を取得するには？（slice）
jQueryオブジェクトで保持している要素セットから、指定したm～n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。
