jQuery.eachの詳しい説明 use_jquery

jQuery.each メソッドは、jQuery のコア ツール メソッドの 1 つで、オブジェクトと配列を反復するために使用できる一般的な反復メソッドです。 jQuery オブジェクトを反復処理する $().each() メソッドとは異なり、このメソッドは任意のオブジェクトを反復処理するために使用できます。通常は 2 つのパラメータ

が必要です

オブジェクト: トラバースする必要があるオブジェクトまたは配列。

callback: 各メンバー/要素によって実行されるコールバック関数。

コールバック関数には 2 つのパラメータがあります。1 つ目はオブジェクトのメンバーまたは配列のインデックスで、2 つ目は対応する変数またはコンテンツです。各ループを終了する必要がある場合は、コールバック関数が false を返すようにすることができ、他の戻り値は無視されます。

要素のインデックスとコンテンツの両方を使用して、配列をループします。例は次のとおりです。

//例遍对象，同时使用成员名称和变量内容。

$.each( [0,1,2], function(i, n){
 alert( "Item #" + i + ": " + n );
});
//例遍对象，同时使用成员名称和变量内容。

$.each( { name: "John", lang: "JS" }, function(i, n){
 alert( "Name: " + i + ", Value: " + n );
});

もちろん、インスタンス呼び出しを直接使用することもできます

  $( 'div' ).each( function(i,n){
    return i+n.text;
  } )

実際、ソース コード内のインスタンス (プロトタイプ) メソッドも呼び出される静的メソッドなので、各メソッドを分析するには、その静的メソッドを分析するだけで済みます。インスタンスの呼び出しは、静的メソッドを使用する特殊なケースにすぎません。

// 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 );
  },

プロトタイプメソッドでは、このオブジェクトをトラバース対象のオブジェクトとして直接渡します。 以下は静的メソッドのソースコードです

。

// args is for internal usage only
  each: function( object, callback, args ) {
    var name, i = 0,
      length = object.length,
      isObj = length === undefined || jQuery.isFunction( object );
    if ( args ) {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.apply( object[ name ], args ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.apply( object[ i++ ], args ) === false ) {
            break;
          }
        }
      }

    // A special, fast, case for the most common use of each
    } else {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }

    return object;
  },

特に多くはありませんが、このとき、私たちがよく使うマニュアルでは通常 2 つのパラメーターを使用することに注意する必要があります。ソース コードでは、受け入れ可能なパラメータが 3 つあり、3 番目のパラメータは配列であり、コールバック関数のパラメータとして渡されます。

最初にいくつかの変数を宣言します、i、name、lengthはループの準備にありますが、isObjは便利なパラメータが配列であるかオブジェクトであるかを判断することができます。パラメータが関数であるか、長さ属性が存在しない場合、残りは配列または配列のようなものとして処理されます。

isObj = 長さ === 未定義 || jQuery.isFunction( object );
この文は非常に簡潔に書かれており、演算子の優先順位を使用して最初に実行されます ===

実際、この種の判断はあまり正確ではなく、次のような大まかな区別にすぎません。

 var obj={length:'a'};
 var isObj= obj.length=== undefined || jQuery.isFunction( obj );
 alert(isObj); //false

次に、3 番目のパラメーターが追加されているかどうかに基づいて区別されます。まず、追加しない場合の状況を見てみましょう。これは

です。

} else {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }

isObj 変数に基づいて配列とオブジェクトを「区別」します。配列には for ループを使用し、オブジェクトには for...in ループを使用します。ループが実行されるたびに、コールバック関数が実行され、現在のループ配列が実行されます。またはオブジェクトのキーと値が実行されます。ここで使用される呼び出しメソッドを渡します。最初のパラメータは関数の「this」です。つまり、現在のループの値が this として使用され、次の 2 つはキーと値です。値またはポインタと値を使用するため、ループ内でコールバック関数を使用します。2 番目のパラメータはこれを使用するのと同じです。例:

//刚才的例子
 $( 'div' ).each( function(i,n){
    return i+n.text;
  } )
//等价于
 $( 'div' ).each( function(i,n){
    return i+this.text;
  } )

3 番目のパラメータが追加された場合、コールバック関数の値の転送メソッドが変更されます。これは引き続き現在の値を指しますが、args は 3 番目のパラメータです。ここで注意する必要があるのは、3 番目のパラメータは js オリジナルの配列形式である必要があり、クラス配列または jQuery オブジェクトにすることはできません。そうでない場合はエラーが発生します。 apply メソッドがサポートされていないため、報告されません。コールバック関数が false を返した場合、ループはスキップされます。例えば、奇数番目の添字配列のみを処理し、偶数番目の項目と判断された場合は、コールバック関数 <🎜 内で return false を実行するだけです。 >

return object;

最後に元のオブジェクトや配列などを返します。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。