jquery.eachの詳しい使い方とサンプルコード

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

object: 走査する必要があるオブジェクトまたは配列。

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

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

  $( 'p' ).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番目のパラメータは配列になります。コールバック関数のパラメータとして入力します。

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

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 として使用する関数です。次の 2 つはキーと値、またはポインタと値です。ループ内でコールバック関数の 2 番目のパラメータを使用します。これを使用するのと同じです。例:

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

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

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

以上がjquery.eachの詳しい使い方とサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。