jQuery API の jQuery . map( array, callback( elementOfArray, indexInArray ) ) は、arrayに指定した配列を、callbackに指定した関数で、新たな配列に変換する。
引数
- array
変換したい配列。
- callback( elementOfArray, indexInArray )
変換方法を指定する関数。
「null」を返すと、その項目要素を、配列から取り除く。
- elementOfArray
配列の項目要素。
- indexInArray
配列内のインデックス。
戻り値
- Array
変換後の配列。
記述方法
jQuery . map( 配列, function( 配列の項目要素, 配列内のインデックス ) {
return 処理;
} );
return 処理;
} );
「配列」に、「処理」を実行し、実行結果返す。その際、「配列の項目要素」と「配列内のインデックス」を関数に引き渡すことができる。
記述例
var array = [ '項目１', '項目２', '項目３' ];
var newArray = jQuery . map( array, function( elementOfArray, indexInArray ) {
return 'インデックス' + indexInArray + '：' + elementOfArray;
} );
jQuery( '#sample' ) . html( newArray . join( '<br />' ) );
var newArray = jQuery . map( array, function( elementOfArray, indexInArray ) {
return 'インデックス' + indexInArray + '：' + elementOfArray;
} );
jQuery( '#sample' ) . html( newArray . join( '<br />' ) );
idが「sample」である要素内に、
インデックス0：項目１<br />インデックス1：項目２<br />インデックス2：項目３
実装例（サンプル）
12345
9876
20120116
実装例（サンプル）の動作について
「変換」ボタンをクリックすると、「12345」「9876」「20120116」を、3桁区切りに変換する。
「変換」ボタンを再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
var array = [ '12345', '9876', '20120116' ];
jQuery( '#jquery-sample button' ) . toggle(
function() {
var newArray = jQuery . map( array, function( elementOfArray, indexInArray ) {
while( elementOfArray != ( elementOfArray = elementOfArray . replace( /^(-?\d+)(\d{3})/, '$1,$2' ) ) );
return elementOfArray;
} );
jQuery( '#jquery-sample p' ) . html( newArray . join( '<br />' ) );
},
function() {
jQuery( '#jquery-sample p' ) . html( '12345<br />9876<br />20120116' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
var array = [ '12345', '9876', '20120116' ];
jQuery( '#jquery-sample button' ) . toggle(
function() {
var newArray = jQuery . map( array, function( elementOfArray, indexInArray ) {
while( elementOfArray != ( elementOfArray = elementOfArray . replace( /^(-?\d+)(\d{3})/, '$1,$2' ) ) );
return elementOfArray;
} );
jQuery( '#jquery-sample p' ) . html( newArray . join( '<br />' ) );
},
function() {
jQuery( '#jquery-sample p' ) . html( '12345<br />9876<br />20120116' );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample {
margin: 10px;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px;
}
-->
</style>
HTML
<div id="jquery-sample">
<button>変換</button>
<p>
12345<br />9876<br />20120116
</p>
</div>
<button>変換</button>
<p>
12345<br />9876<br />20120116
</p>
</div>