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' );
} );
jQuery( Element ) . css( 'backgroundColor', 'red' );
} );
クラス名が「sample」である各要素の背景色を、赤色に変更。
実装例（サンプル）
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
実装例（サンプル）の動作について
「each()」ボタンをクリックすると、「項目１、項目３、項目５」のテキストカラーを青色に、「項目２、項目４」のテキストカラーを赤色に、「項目１、項目２、項目３」のリストマークを「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>
<!--
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>
<!--
#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>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>
<button id="jquery-sample-button">each()</button>
</p>
<ul id="jquery-sample">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>