jQuery.eachの使い方を詳しく解説

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

object の 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;
  },

まず、3つを受け入れます。このときのパラメータ 注意していただきたいのは、私たちがよく使うマニュアルではパラメータを 2 つと書くことが多いですが、実際にはソースコード内で受け入れられるパラメータは 3 つあり、そのうちの 3 番目のパラメータが 1 つです。配列はコールバック関数のパラメータとして渡されます。

最初にいくつかの変数を宣言します。i、name、lengthはループの準備であり、パラメータが関数であるかオブジェクトであるかを判断するのに便利です。存在しない場合、それ以外は配列または配列状として扱われるかを判定します。

isObj = length === unknown || 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 つはキーと値、またはポインタと値です。ループ内でコールバック関数のパラメータを指定する場合は、これを使用するのと同じです。例:

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

3 番目のパラメータを追加する場合、コールバック関数の値の受け渡しメソッドは変更されますが、パラメータを渡すために apply メソッドが使用されます。つまり、3 番目のパラメータ配列が渡されます。この配列にあるパラメータと同じ数だけ、コールバック関数で使用できることに注意してください。 js のオリジナルのサウンド配列であり、クラス配列または jQuery オブジェクトにすることはできません。そうでない場合は、apply メソッドがサポートされていないため、エラーが報告されます。コールバック関数が false を返した場合、ループはスキップされます。例えば、偶数であると判断できる場合は、コールバック関数内で return false を実行するだけです

return object;

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

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

jQuery.each の使用法に関する詳細な記事については、PHP 中国語 Web サイトに注目してください。