jQuery.map

 JavaScript
2013.07.02
$.map(array, function (element, index) {});

 

$.map、地味に便利です。

第1引数に配列、第2引数に関数をとり、配列の要素ごとにその関数を適用します。

jQuery.map() | jQuery API Documentation

 

よくあるケースとしては、AjaxでJSONデータをもってくるとき。こんな感じの。

[
    {"id": 1, "name": "apple"},
    {"id": 2, "name": "grape"},
    {"id": 3, "name": "banana"}
]

 

このデータを第1引数に渡す形で $.mapを使えば、配列の各要素に第2引数の関数が適用されます。
実際にはこんな感じで使われるはず。

$.ajax({url: 'data?arg='+arg, dataType: 'json'}).done(function (json) {
    var html = ''
    $.map(json, function (item, idx) {
        html += '<li id="'+item.id+'" '+(idx % 2 == 0 ? 'class="even"' : '')+'>;';
        html += item.name+'</li>';
    });
    $('ul').html(html).fadeIn();
});

 

for each文の境界条件を考慮しなくていい & for文のインデックス値が使えるいいとこ取り。

奇数行と偶数行で背景色を変えたいときや、ブレイク処理があるとき便利。

 

 

それといくつかのCSSのクラス名を軸に何か処理をしたいときなどには

$.map(['red', 'blue', 'yellow'], function (color, idx) {
    console.log('something with '+color);
});

 

という感じで配列リテラルと $.mapの組み合わせが相性よいです