デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.map( )functionによって要素をフィルタリング

構文

functionによって要素をフィルタリング返値:jQueryオブジェクト
jQo.map( function )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は以下の様な構文になっています。まず引数を2つ(インデックス番号 / セレクタの要素)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で、返値のjQueryオブジェクトに含めたい場合は、その内容をreturnで返します。returnで返さない場合は、返値のjQueryオブジェクトに含まれないためフィルタリングできるというわけです。

mapに設定するFunctionの構文
function 任意の名前(インデックス番号,セレクタの要素){
 任意の処理(引数を利用可能)
 return jQueryオブジェクトの要素;
}

サンプルmap/01.htmlで利用したmapFuncは以下の様になっています。まず2行目では、引数で受け取ったセレクタの要素に対しtextメソッドを利用して、テキストの内容を取得します。セレクタの要素elemは「DOM要素」のためtextなどjQueryのメソッドを利用する場合はjQueryメソッドを利用してjQueryオブジェクトにする必要があります。

そして3行目から5行目のif文によって、テキストの内容が「bbbbb」ではなかったら要素「elem」をreturnで返すようにしました(つまりテキストが「bbbbb」の要素は返しません)。

function mapFunc(index, elem){
	var str = $(elem).text();
	if (str != "bbbbb") {
		return elem;
	}
};

このようにmapメソッドでフィルタリングされたjQueryオブジェクトはメソッドチェーンによって後続の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つあります。

<div>aaaaa</div>
<div><span>bbbbb</span></div>
<div>ccccc</div>
<div><span>ddddd</span> <span>eeeee</span></div>

jQueryは以下の様にサンプルmap/01.htmlと同じで、mapFuncによってフィルタリングしてcssメソッドで背景色をピンクにしています。

$("button").click(function(){
	$("div").map(mapFunc).css("background-color","#fcf");
});

しかしmapFuncは以下の様に変更されており、findメソッドを利用してdiv要素内のspan要素を選択しています。returnで返す値はjQueryオブジェクトではダメなのでgetメソッドで配列に変換してから返しています。
jQueryオブジェクト内の要素はjQueryオブジェクトではないため、returnでjQueryオブジェクトを返してはいけません。

function mapFunc(index, elem){
	return $(elem).find("span").get();
};

結果として、buttonをクリックするとdiv要素内にあるspan要素の背景色がピンクになります。これはdiv要素から特定のdiv要素を抽出する単純なフィルタリングではなく、div要素とは別のspan要素を抽出しているためフィルタリングとはいえないかもしれません。しかし、それほど強力に利用できるのです

特定の情報を集めたjQueryオブジェクトを作成します

mapメソッドは要素をフィルタリングするのではなく、要素から特定の情報を集めるのにも利用できます。
サンプル(map/03.html)を開いてselect要素(選択肢は5つ)があることを確認して下さい。

<select name="sample" multiple>
	<option>あああああ</option>
	<option>いいいいい</option>
	<option>ううううう</option>
	<option>えええええ</option>
	<option>おおおおお</option>
</select>

jQueryは以下の様に記述され、select要素で選択された要素(:selected)に対してmapメソッドを利用しています。返された値(jQueryオブジェクト)はgetメソッドで配列に変換して変数「myData」に代入し、アラートで表示するようにしています。

$("button").click(function(){
	var myData = $("option:selected").map(mapFunc).get();
	alert(myData)
})

mapFuncは以下の様になっており、渡された要素に対しtextメソッドを利用してテキストの内容を取得し、それを返しています。ポイントはjQueryオブジェクトの要素ではなく、普通の文字列を返している点です

function mapFunc(index, elem){
	return $(elem).text();
}

2つの要素が選択されている場合は、mapメソッドによって処理され、2つの文字情報をもつ「配列のようなjQueryオブジェクト」が返されます。returnでjQueryオブジェクトの要素を返していないので、jQueryオブジェクトですがjQueryオブジェクトとしては利用できません

しかし、このサンプルではjQueryオブジェクトとして利用せず、返値はgetメソッドによって本当の配列に変換して情報として利用するので問題ありません(本サンプルではアラートで表示するだけですが)。

$("button").click(function(){
	var myData = $("option:selected").map(mapFunc).get();
	alert(myData)
})

結果として、選択肢を選択してからbuttonをクリックすると、アラートで選択した選択肢の文字列が配列として表示されます。

特定の情報を集めても...

サンプルmap/03.htmlは使いどころなさそうに感じるかもしれませんが、実は便利な使い方です。
サンプル(map/03b.html)を開いてbody内の構成はサンプルmap/03.htmlと同じ事を確認してください。jQueryは以下の様に記述されmapメソッドを利用せずにtextメソッドだけでテキスト要素を取得してアラートで表示させています。

$("button").click(function(){
	var myData = $("option:selected").text();
	alert(myData)
})

結果として「複数」選択してからbuttonをクリックすると、テキストの内容が「連結されて」表示されてしまいます。これではデータとして扱うときにとても不便です。

関連情報

シンプルなフィルタリングにはfilterメソッドも利用できます。

フィルタリングせずに要素ごとに特定の処理をしたいだけの場合はeachメソッドを利用して下さい。
htmlの要素ではなく純粋なデータ(配列/objectオブジェクト)の要素に対してフィルタリングしたい場合はUtilitiesのjQuery.mapメソッドを利用してください。