ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery each() の使い方

jQuery each() の使い方

WBOY
WBOYオリジナル
2016-05-16 18:31:561372ブラウズ

jQuery と jQuery オブジェクトの両方がこのメソッドを実装します。jQuery オブジェクトの場合、各メソッドは単純に委任されます。つまり、jQuery オブジェクトは最初のパラメーターとして jQuery の各メソッドに渡されます。つまり、jQuery によって提供される各メソッドは、すべてのサブ要素です。パラメータ 1 で指定されたオブジェクトは 1 つずつ呼び出されます。 jQuery オブジェクトが提供する each メソッドは、jQuery 内のサブ要素を 1 つずつ呼び出します。

コードをコピー コードは次のとおりです。

jQuery.prototype.each=function( fn , args ) {
return jQuery.each(this, fn, args );
}

jQuery が提供する各メソッドの具体的な実装を見てみましょう。
jQuery.each(obj ,fn,arg)
このメソッドには、操作対象のオブジェクト obj、操作対象の関数 fn、および関数パラメータ args の 3 つのパラメータがあります。
ojb オブジェクトに基づいて説明します。

1. obj オブジェクトは配列です。
各メソッドは、配列内のサブ要素に対して fn 関数を 1 つずつ呼び出します。特定のサブ要素を呼び出して返される結果は false になるまでです。つまり、提供された fn 関数で処理し、特定の条件を満たした後で各メソッド呼び出しを終了できます。 each メソッドが arg パラメーターを提供する場合、fn 関数呼び出しによって渡されるパラメーターは arg です。それ以外の場合: サブ要素のインデックス、サブ要素自体
2.obj オブジェクトは配列ではありません
このメソッドと 1 の最大の違いは、 fn メソッドは戻り値に関係なく 1 つずつ実行されることです。つまり、fn 関数が false を返した場合でも、obj オブジェクトのすべてのプロパティが fn メソッドによって呼び出されます。呼び出しで渡されるパラメータは 1 に似ています。
コードをコピー コードは次のとおりです。

jQuery.each=function( obj, fn , args ) {
if ( args ) {
if ( obj.length == unknown ){
for ( var i in obj )
fn.apply( obj, args ); }else{
for ( var i = 0, ol = obj.length; i
if ( fn.apply( obj, args ) === false )
break;

}

}
} else {
if ( obj.length == unknown ) {
for ( var i in obj )
fn.call( obj, i , obj );
}else{
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) ) != = false; val = obj[ i] ){}

}
}
return obj;
}

特別な注意が必要です各メソッドへの fn の具体的な呼び出しメソッドは単純な fn(i,val) や fn(args) ではなく、fn.call(val,i,val) や fn.apply(obj.args) の形式をとります。これは、独自の fn 実装で、このポインタを直接使用して配列またはオブジェクトのサブ要素を参照できることを意味します。このメソッドは、ほとんどの jQuery で使用される実装メソッドです。
jQuery には each メソッドがあり、これを使うととても楽しいです。以前のように for ループを記述する必要もありません。jQuery のソース コードには各メソッドがたくさん使用されています。
実際には、jQuery の各メソッドは、js の call メソッドを通じて実装されます。

以下は呼び出しメソッドの簡単な紹介です。 実際、公式の説明では、「オブジェクトのメソッドを呼び出し、現在のオブジェクトを別のオブジェクトに置き換える」と説明されています。このポインタを変更するという人もいます。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
パラメータ
thisObj
オプション。現在のオブジェクトとして使用されるオブジェクト。
arg1、arg2、、、argN
オプション。一連のメソッドパラメータが渡されます。
説明
call メソッドを使用すると、別のオブジェクトの代わりにメソッドを呼び出すことができます。 call メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。
インターネット上の非常に古典的な例を引用
Js コード

コードをコピー コードは次のとおりです:
関数 add(a,b)
{
alert(a b);
}
関数 sub(a,b)
{
alert(a-b) );
}
add.call(sub,3,1);

sub を add, add.call(sub,3,1) == add(3, 1) なので、実行結果は次のようになります:alert(4);
注: js の関数は実際にはオブジェクトであり、関数名は Function オブジェクトへの参照です。
ここでは具体的な通話については詳しく触れません。
jQuery の各メソッドの一般的な使用法をいくつか示します
Js コード

コードをコピー コードは次のとおりです:

var arr = [ "1", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
//上記のそれぞれの出力結果は次のとおりです: 1、2、3、4
var arr1 = [[1, 4, 3], [4, 6, 6], [7 , 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
}); 実際には、arr1 は 2 です。 -次元配列、item は各 1 次元配列を取得することと同等です。
//item[0] は各 1 次元配列の最初の値を取得することと同等です。
//したがって、上記のそれぞれの出力は次のようになります。 1 4 7
var obj = { 1:1, 2:2, 3:3, 4:4};
$.each(obj, function(key, val) {
alert(obj[ key] );
});
//これはさらに強力で、すべての属性を循環できます
// 出力結果は次のとおりです: 1 2 3 4

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。