jQuery API の jQuery . map( arrayOrObject, callback( value, indexOrKey ) ) は、arrayOrObjectに指定した配列もしくはオブジェクトを、callbackに指定した関数で変換し、新たな配列に格納する。
引数
- arrayOrObject
変換したい配列もしくはオブジェクト。
- callback( value, indexOrKey )
変換方法を指定する関数。
「null」を返すと、その項目要素を、配列から取り除く。
- value
配列やオブジェクトの値。
- indexOrKey
配列やオブジェクトのプロパティの、インデックスやキー。
戻り値
- Array
変換後の配列。
記述方法
jQuery . map( 配列, function( 配列の項目要素, 配列内のインデックス ) {
return 処理;
} );
return 処理;
} );
「配列」に、「処理」を実行し、実行結果返す。その際、「配列の項目要素」と「配列内のインデックス」を関数に引き渡すことができる。
記述例
var colors = { 'red': '#ff0000', 'blue': '#0000ff', 'green': '#008000' };
var newArray = jQuery . map( colors, function( value, key ) {
return '<li>' + key + '：' + value + '</li>';
} );
jQuery( 'ul#sample' ) . html( newArray . join( '\n' ) );
var newArray = jQuery . map( colors, function( value, key ) {
return '<li>' + key + '：' + value + '</li>';
} );
jQuery( 'ul#sample' ) . html( newArray . join( '\n' ) );
idが「sample」であるul要素内に、
<li>red：#ff0000</li>
<li>blue：#0000ff</li>
<li>green：#008000</li>
<li>blue：#0000ff</li>
<li>green：#008000</li>
実装例（サンプル）
- 赤色
- 青色
- 緑色
実装例（サンプル）の動作について
「変換」ボタンをクリックすると、「赤色」「青色」「緑色」のテキストを、「red：#ff0000」「blue：#0000ff」「green：#008000」に変え、テキストの色も変更する。
「変換」ボタンを再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
var colors = { 'red': '#ff0000', 'blue': '#0000ff', 'green': '#008000' };
jQuery( '#jquery-sample button' ) . toggle(
function() {
var newArray = jQuery . map( colors, function( value, key ) {
return '<li style="color: ' + value + ';">' + key + '：' + value + '</li>';
} );
jQuery( '#jquery-sample ul' ) . html( newArray . join( '\n' ) );
},
function() {
jQuery( '#jquery-sample ul' ) . html( '<li>赤色</li><li>青色</li><li>緑色</li>' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
var colors = { 'red': '#ff0000', 'blue': '#0000ff', 'green': '#008000' };
jQuery( '#jquery-sample button' ) . toggle(
function() {
var newArray = jQuery . map( colors, function( value, key ) {
return '<li style="color: ' + value + ';">' + key + '：' + value + '</li>';
} );
jQuery( '#jquery-sample ul' ) . html( newArray . join( '\n' ) );
},
function() {
jQuery( '#jquery-sample ul' ) . html( '<li>赤色</li><li>青色</li><li>緑色</li>' );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample {
margin: 10px;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px;
}
-->
</style>
HTML
<div id="jquery-sample">
<button>変換</button>
<ul>
<li>赤色</li>
<li>青色</li>
<li>緑色</li>
</ul>
</div>
<button>変換</button>
<ul>
<li>赤色</li>
<li>青色</li>
<li>緑色</li>
</ul>
</div>