[jQuery] 複数要素と配列の処理を行うmapメソッドの利用方法

jQueryで配列の処理をするのにはmapメソッドを使います。div や li などが連続している時、その中の要素を取り出したりすることができます。
Contents
mapメソッドの特徴
mapメソッドは、配列のすべての要素に指定された関数を実行し、その結果を配列(オブジェクト形式)で返してくれます。
書式
1 |
var test = $('#sample').map(function(index, element){ //処理 }); |
・左辺に変数を設定
・右辺にセレクタを設定し、function(index,element)の第一引数には、要素のインデックス、第二引数には処理中に参照された要素が入ります。両方とも省略することが可能です。
利用例
リスト内の<span>1</span>内の番号を item という変数にカンマ区切りで取得するプログラム。
1 2 3 |
var item = $('li').map(function(){ item += $(this).children('span').text() + ','; }); |
1 2 3 4 5 |
<ul> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> </ul> |
関連記事
- [D3.js] 要素を加え文字列を表示させる方法
- [jQuery] 配列を取り出して任意の形で表示する each() append()
- [jQuery] 背景の色を変更する方法
- 10分で完了!ウェブフォントアイコン Font Awesomeの使い方
- [jQuery] テーブルの1列目の<td></td>の中身を取得する方法