each( function( index, Element ) )

jQuery API の each( function( index, Element ) ) は、マッチした各要素に対し、関数を繰り返し実行するメソッド。

function関数の戻り値が、「false」の場合、繰り返し処理を中止する。

function関数の戻り値が、「true」の場合、次の繰り返し処理に移る。

引数

function( index, Element )

マッチした各要素に対し、繰り返し実行するコールバック関数。

「false」返すと、繰り返し処理を中止する。

「true」返すと、次の繰り返し処理に移る。

index

「0」から始まるインデックス番号。

Element

現在マッチしているDOM要素。

記述方法

jQuery( セレクター ) . each( function( index, Element ) {
    処理
} );

「セレクター」にマッチした各要素に、「処理」を実行。

記述例

jQuery( '.sample' ) . each( function( index, Element ) {
    jQuery( Element ) . css( 'backgroundColor', 'red' );
} );

クラス名が「sample」である各要素の背景色を、赤色に変更。

実装例(サンプル)

  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5

実装例(サンプル)の動作について

「each()」ボタンをクリックすると、「項目1、項目3、項目5」のテキストカラーを青色に、「項目2、項目4」のテキストカラーを赤色に、「項目1、項目2、項目3」のリストマークを「circle」に、変更する。

「each()」ボタンを再度クリックすると、元に戻す。

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

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            jQuery( '#jquery-sample li' ) . each( function( index, Element ) {
                if( index % 2 == 0 ) { return true; }
                jQuery( Element ) . css( 'color', 'red' );
            } );
            jQuery( '#jquery-sample li' ) . each( function( index, Element ) {
                if( index % 2 != 0 ) { return true; }
                jQuery( Element ) . css( 'color', 'blue' );
            } );
            jQuery( '#jquery-sample li' ) . each( function( index, Element ) {
                if( index == 3 ) { return false; }
                jQuery( Element ) . css( 'listStyleType', 'circle' );
            } );
        },
        function() {
            jQuery( '#jquery-sample li' ) . css( {
                'color': '#333333',
                'listStyleType': 'square',
            } );
        }
    );
} );
// -->
</script>

CSS

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

HTML

<p>
    <button id="jquery-sample-button">each()</button>
</p>
<ul id="jquery-sample">
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
    <li>項目4</li>
    <li>項目5</li>
</ul>

スポンサード リンク

カテゴリー: API, Collection Manipulation, JavaScript, jQuery, その他諸々, トラバース タグ: パーマリンク