読者です 読者をやめる 読者になる 読者になる

【jQuery】複数の要素・配列に対して処理をするmapの使い方

スポンサーリンク

以前 jQuery の繰り返し処理について書きましたが(【jQuery】複数の要素に対して繰り返し処理をする(each・for) - TASK NOTES)、もうひとつ map というメソッドがあります。これは単純な繰り返し処理用ではないので前回のエントリからは外しましたが、使い慣れると非常に便利なのでまとめておきたいと思います。

今回使うサンプルのHTMLはこんな感じです。

<div class="hoge">ほげ1</div>
<div class="hoge">ほげ2</div>
<div class="hoge">ほげ3</div>
...

jQueryのmapとは

map とはマッチした要素数分を繰り返して指定した関数を実行し、その結果をまとめた新しいjQueryオブジェクトを返してくれます。簡単に言うと配列から別の配列を作るという事です。

.map( )メソッド

var arr = $('セレクタ').map(function(index, element){ return});

第1引数には各要素のインデックス番号が、第2引数には繰り返し処理中の要素が参照され、return 〜で返した値を配列に追加していきます。なのでreturn nullを返した場合は何も追加されません。

また、2つの引数はどちらも省略可能です。引数については公式を見てみると以下のようになってます。

f:id:tasukujp:20141019173219p:plain

.map() | jQuery API Documentation

各要素からテキストを取得する

class="hoge" の各要素からテキストを取得して arr 変数に格納します。

var arr = $(".hoge").map(function(){
    return $(this).text();
});
alert(arr);

ただし、このままだと以下のような状態になります。これは map の返り値が jQuery でラップされた配列になっているためです。

f:id:tasukujp:20141019175818p:plain

f:id:tasukujp:20141019182343p:plain

普通の配列として取得する

jQueryでラップされた状態だとなにかと不便なので普通の配列にしたい場合は.get()メソッドを追加してあげます。

var arr = $(".hoge").map(function(){
    return $(this).text();
}).get();
alert(arr);

これで普通の配列として arr に格納されました。

f:id:tasukujp:20141019182439p:plain

f:id:tasukujp:20141019182448p:plain

文字列として取得する

配列ではなくて文字列で取得したい場合は.get()の後に.join()を追加します。

var arr = $(".hoge").map(function(){
    return $(this).text();
}).get().join();
alert(arr);

文字列に変換されています。

f:id:tasukujp:20141019183654p:plain

jQuery.map( )メソッド

上述した .map( )メソッド はjQueryオブジェクトに対してのみ使用できますが、こちらの場合は普通の配列やjQueryオブジェクトでないものも扱えます。

var arr = $.map(array, function(value, index) { return 〜; });

引数(array)には配列やオブジェクトを渡します。しかしコールバック関数の引数は .map( )メソッド と逆になってます。ここは each と違うところなので気を付けましょう。公式は以下の通りとなってます。これ何で逆にしたんでしょうね。

f:id:tasukujp:20141021174811p:plain

jQuery.map() | jQuery API Documentation

普通の配列を指定

普通の配列を指定した場合は、コールバック関数の第1引数には値が、第2引数にはインデックスが取得されます。

var arr = [ 1, 2, 3 ];
arr = $.map(arr, function(val, i) {
    return val * val;
});
alert(arr);
オブジェクトを指定

オブジェクトを指定した場合は、コールバック関数の第1引数には値が、第2引数にはKEYが取得されます。

var obj = { 1:"tokyo", 2:"nagoya", 3:"osaka" };
obj = $.map(obj, function(val, key) {
    return (val + ': ' + key);
});
alert(obj);
jQueryオブジェクトを指定

jQueryオブジェクトを指定することも出来ます。ただし、thisを使って処理中の要素を取得する事はできませんので気を付けましょう。ここでのthiswindowを参照します。

var arr = $.map($(".hoge"), function(val, i) {
    return $(val).text();
});
alert(arr);
戻り値

ここまでで気づいたと思いますが jQuery.map( ) の場合、戻り値は Array で配列になってます。なので、.map( ) の場合と違って.get()をする必要はありません。