jQuery.each()
.each()は渡されたjQueryオブジェクトに対して繰り返し処理を行うイテレータ関数です。
例えば次のようなHTMLがあったとします。
|
1 2 3 4 5 |
<ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> |
.each()を使うことでそれぞれの<li>要素に対して処理を行うことができます。
|
1 2 3 |
$('ul > li').each(function() { console.log($(this).html()); // => 'one', 'two', 'three' }); |
またこの式は次のように変形することもできます。
|
1 2 3 |
$.each($('ul > li'), function() { console.log($(this).html()); // => 'one', 'two', 'three' }); |
こうすると.each()は 配列を受け取って順繰りに処理する 関数であることが分かります。
そのため、jQueryオブジェクト以外でも処理することができます。
|
1 2 3 |
$.each(['one', 'two', 'three'], function() { console.log(this.toString()); // => 'one', 'two', 'three' }); |
ここからはjQueryのソースコードを見ていきます。jQuery.each() は以下のように実装されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/*===== jquery-1.11.1.js-L353 =====*/ // args is for internal usage only each: function( obj, callback, args ) { var value, i = 0, length = obj.length, isArray = isArraylike( obj ); if ( args ) { if ( isArray ) { for ( ; i < length; i++ ) { value = callback.apply( obj[ i ], args ); if ( value === false ) { break; } } } else { for ( i in obj ) { value = callback.apply( obj[ i ], args ); if ( value === false ) { break; } } } // A special, fast, case for the most common use of each } else { if ( isArray ) { for ( ; i < length; i++ ) { value = callback.call( obj[ i ], i, obj[ i ] ); if ( value === false ) { break; } } } else { for ( i in obj ) { value = callback.call( obj[ i ], i, obj[ i ] ); if ( value === false ) { break; } } } } return obj; }, |
メソッドチェーンの中で.each()を呼び出すと、thisを第1引数として渡します。
|
1 2 3 4 5 6 7 |
/*===== jquery-1.11.1.js-L132 =====*/ // Execute a callback for every element in the matched set. // (You can seed the arguments with an array of args, but this is // only used internally.) each: function( callback, args ) { return jQuery.each( this, callback, args ); }, |
$('ul > li').each(function() {…}); と $.each($('ul > li'), function() {…}); が同じ動作をするのはこのためです。
jQuery.each()は第1引数で受け取ったobjectをfor文でひとつずつまわして、第2引数のコールバック関数に渡しています。
|
1 2 3 4 5 6 7 8 |
/*===== jquery-1.11.1.js-L381 =====*/ for ( ; i < length; i++ ) { value = callback.call( obj[ i ], i, obj[ i ] ); if ( value === false ) { break; } } |
ここでポイントになるのは.callメソッドです。
このメソッドは、あるオブジェクトに属するメソッドを別のオブジェクトのメソッドのように呼び出せるもので、第1引数に渡したものがそのメソッド内でのthisになります。jQuery.each()の第2引数に指定した関数内でthisが使える理由はここにあります。
|
1 2 3 |
$('ul > li').each(function() { console.log($(this).html()); // => 'one', 'two', 'three' }); |
次回は .css() について見ていきたいと思います。
