以前 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つの引数はどちらも省略可能です。引数については公式を見てみると以下のようになってます。
.map() | jQuery API Documentation
各要素からテキストを取得する
class="hoge" の各要素からテキストを取得して arr 変数に格納します。
var arr = $(".hoge").map(function(){ return $(this).text(); }); alert(arr);
ただし、このままだと以下のような状態になります。これは map の返り値が jQuery でラップされた配列になっているためです。
普通の配列として取得する
jQueryでラップされた状態だとなにかと不便なので普通の配列にしたい場合は.get()
メソッドを追加してあげます。
var arr = $(".hoge").map(function(){ return $(this).text(); }).get(); alert(arr);
これで普通の配列として arr に格納されました。
文字列として取得する
配列ではなくて文字列で取得したい場合は.get()
の後に.join()
を追加します。
var arr = $(".hoge").map(function(){ return $(this).text(); }).get().join(); alert(arr);
文字列に変換されています。
jQuery.map( )メソッド
上述した .map( )メソッド はjQueryオブジェクトに対してのみ使用できますが、こちらの場合は普通の配列やjQueryオブジェクトでないものも扱えます。
var arr = $.map(array, function(value, index) { return 〜; });
引数(array)には配列やオブジェクトを渡します。しかしコールバック関数の引数は .map( )メソッド と逆になってます。ここは each と違うところなので気を付けましょう。公式は以下の通りとなってます。これ何で逆にしたんでしょうね。
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
を使って処理中の要素を取得する事はできませんので気を付けましょう。ここでのthis
はwindow
を参照します。
var arr = $.map($(".hoge"), function(val, i) { return $(val).text(); }); alert(arr);
戻り値
ここまでで気づいたと思いますが jQuery.map( ) の場合、戻り値は Array で配列になってます。なので、.map( ) の場合と違って.get()
をする必要はありません。