jQuery . each( collection, callback( indexInArray, valueOfElement ) )

jQuery API の jQuery . each( collection, callback( indexInArray, valueOfElement ) ) は、collectionに指定した配列もしくはオブジェクトに対し、callback関数を実行する、汎用的イテレータ(繰返し)関数。

引数

collection

配列もしくはオブジェクト。

callback( indexInArray, valueOfElement )

すべてのオブジェクトに実行する関数。

indexInArray

インデックス。

collectionが配列の場合、0から始まるインデックス番号。

valueOfElement

処理中の値。

戻り値

Object

オブジェクト。

記述方法

jQuery . each( 配列もしくはオブジェクト, function( index, value ) {
    処理
} );

「配列もしくはオブジェクト」に対し、「処理」を実行。

記述例

jQuery . each( [ 'itemA', 'itemB', 'itemC' ], function( index, value ) {
    jQuery( '#sample' ) . append( '<p>' + index + ': ' + value + '</p>' );
} );

idが「sample」である要素内に、 「<p>0: itemA</p>」 「<p>1: itemB</p>」 「<p>2: itemC</p>」 を追加する。

var map = {
    'keyA': 'valueA',
    'keyB': 'valueB',
    'keyC': 'valueC'
};
jQuery . each( map, function( key, value ) {
    jQuery( '#sample' ) . append( '<p>' + key + ': ' + value + '</p>' );
} );

idが「sample」である要素内に、 「<p>keyA: valueA</p>」 「<p>keyB: valueB</p>」 「<p>keyC: valueC</p>」 を追加する。

実装例(サンプル)

実装例(サンプル)のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    var map = {
        'Red': '赤',
        'Blue': '青',
        'Green': '緑'
    };
    jQuery . each( map, function( key, value ) {
        jQuery( '#jquery-sample' ) . append( '<li>' + key + ': ' + value + '</li>' );
    } );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-sample {
    color: #333333;
    list-style-type: square;
}
-->
</style>

HTML

<ul id="jquery-sample">
</ul>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, Utilities タグ: パーマリンク