)ver1.2〜機能mapメソッドは引数に設定するfunctionによってjQueryオブジェクトで指定した要素をフィルタリングします。フィルタリングの内容をfunctionで自由に設定できるため、非常に柔軟な処理が可能です。要素のフィルタリングに利用するだけでなく、要素の持つ特定の情報を収集することもできます。解説functionによって要素をフィルタリングしますサンプル(map/01.html)を開いてbody内にbutton要素とdiv要素が4つあることを確認して下さい。div要素にはどれぞれテキストが設定されています。<div>aaaaa</div><div>bbbbb</div><div>ccccc</div><div>ddddd</div>jQueryでは、まず以下の部分を確認してください。buttonをクリックするとdiv要素が選択され、それをmapメソッドによって処理します。処理はmapメソッドの引数に設定されたmapFuncが行います。$("button").click(function(){$("div").map(mapFunc).css("background-color","#fcf");});mapメソッドの引数に設定するFunctionは以下の様な構文になっています。セレクタの要素)を受け取ります。これらの引数の値は{}内の処理で利用することができます。任意の処理の後で、返値のjQueryオブジェクトに含めたい場合は、その内容をreturnで返します。returnで返さない場合は、返値のjQueryオブジェクトに含まれないためフィルタリングできるというわけです。jQueryオブジェクトの要素;}サンプルmap/01.htmlで利用したmapFuncは以下の様になっています。textメソッドを利用して、テキストの内容を取得します。jQueryメソッドを利用してjQueryオブジェクトにする必要があります。3行目から5行目のif文によって、テキストの内容が「bbbbb」ではなかったら要素「elem」をreturnで返すようにしました(つまりテキストが「bbbbb」の要素は返しません)。cssメソッドに渡され、背景色をピンクに変更されます。$("button").click(function(){$("div").map(mapFunc).css("background-color","#fcf");});結果として、buttonをクリックするとdiv要素のうちテキストが「bbbbb」の要素がフィルタリングによって省かれ、それ以外のテキストを持つdiv要素の背景色がピンクになります。対象を変更することすらできますmapメソッドはfunctionによってフィルタリングの処理が設定できるため、様々な使い方ができます。サンプル(map/02.html)を開いてbody内の構成を確認してください。button要素と4つのdiv要素があり、上から2番目のdiv要素内にはspan要素が1つあり、4番目のdiv要素内にはspan要素が2つあります。<span>eeeee</span></div>jQueryは以下の様にサンプルmap/01.htmlと同じで、mapFuncによってフィルタリングしてcssメソッドで背景色をピンクにしています。findメソッドを利用してdiv要素内のspan要素を選択しています。getメソッドで配列に変換してから返しています。jQueryオブジェクト内の要素はjQueryオブジェクトではないため、returnでjQueryオブジェクトを返してはいけません。$(elem).find("span").get();};結果として、buttonをクリックするとdiv要素内にあるspan要素の背景色がピンクになります。これはdiv要素から特定のdiv要素を抽出する単純なフィルタリングではなく、div要素とは別のspan要素を抽出しているためフィルタリングとはいえないかもしれません。それほど強力に利用できるのです。特定の情報を集めたjQueryオブジェクトを作成しますmapメソッドは要素をフィルタリングするのではなく、要素から特定の情報を集めるのにも利用できます。サンプル(map/03.html)を開いてselect要素(選択肢は5つ)があることを確認して下さい。:selected)に対してmapメソッドを利用しています。getメソッドで配列に変換して変数「myData」に代入し、アラートで表示するようにしています。textメソッドを利用してテキストの内容を取得し、それを返しています。ポイントはjQueryオブジェクトの要素ではなく、普通の文字列を返している点です。$(elem).text();}2つの要素が選択されている場合は、mapメソッドによって処理され、2つの文字情報をもつ「配列のようなjQueryオブジェクト」が返されます。returnでjQueryオブジェクトの要素を返していないので、jQueryオブジェクトですがjQueryオブジェクトとしては利用できません。getメソッドによって本当の配列に変換して情報として利用するので問題ありません(本サンプルではアラートで表示するだけですが)。$("option:selected").map(mapFunc).get();alert(myData)})結果として、選択肢を選択してからbuttonをクリックすると、アラートで選択した選択肢の文字列が配列として表示されます。特定の情報を集めても...サンプルmap/03.htmlは使いどころなさそうに感じるかもしれませんが、実は便利な使い方です。サンプル(map/03b.html)を開いてbody内の構成はサンプルmap/03.htmlと同じ事を確認してください。textメソッドだけでテキスト要素を取得してアラートで表示させています。$("option:selected").text();alert(myData)})結果として「複数」選択してからbuttonをクリックすると、テキストの内容が「連結されて」表示されてしまいます。これではデータとして扱うときにとても不便です。filterメソッドも利用できます。eachメソッドを利用して下さい。jQuery.mapメソッドを利用してください。