はじめに
今回jQueryを使っている際に、HTML要素の配列を作りたいと思ったときに、オブジェクトにしか配列を作れないと思って、調べてれるとHTMLにも「.map()」が使えるとわかったので備忘録として残します。
「.map()」とは？
「.map()」は、HTML要素や配列・オブジェクトなどに対して繰り返し処理を実行して新しい配列要素を返してくれます。
HTML要素での「.map()」の使い方
sumple.html.haml
%p docomo
%p au
%p softbank
上記のようなpタグが3つあり、このpタグに対して「.map()」の繰り返し処理を使ってみます。
sumple.js
var texts = $('p').map(function(index, element){
return element.innerHTML;
});
console.log(texts);
console.log(texts[0]);
結果
['docomo', 'au', 'softbank']
docomo
上記のような結果が返ってきます。
余談で、特定の要素をクリックして、その要素にチェックボックスがあり、チェックされてるかどうかを検証する場合
sumple.js
$(document).on('click', '.checkboxの要素', function(){
var array = $('.checkboxの要素').map(function(index, value){
return $(this).val();
// $(this)は、イベントを発火させた要素の取得
});
});
みたいな感じで、$(this)の値で新しい配列を作成することも可能です。
配列・オブジェクトでの「map()」の使い方
- 注意点として、引数で持たせている、indexとvalueの順番がHTMLを書く場合と逆になっています。
sumple.js
var array = ['docomo', 'au', 'softbank'];
var array = $.map(array, function(value, index){
return value + 'キャリア';
});
console.log(array)
結果
['docomoキャリア', 'auキャリア', 'softbankキャリア']
mapを活用
上記のように配列にしまうととても便利です。
eachで処理を回したり、条件分岐にも使えたりするので、配列を作成する場合は積極的に使うべきかと思います。
まとめ
今回は特定の要素をクリックして、その要素のidを配列に組み替えて、dataをHTMLに返す作業をした際に、特定のイベントがクリックされるたびに
var array = [];
array.push(id);
みたいなことをしたんですが、イベントが発火するたびに[]の配列が作成されて、一つしかpushされなかったので、mapを使えることを知って助かりました。
わかりにくい点が多いかと思いますが、ご指摘等あればよろしくお願いします。