Detaillierte Erklärung von jQuery.each verwenden_jquery

Die jQuery.each-Methode ist eine der Kernwerkzeugmethoden von jQuery. Es handelt sich um eine allgemeine Iterationsmethode, die zum Iterieren von Objekten und Arrays verwendet werden kann. Im Gegensatz zur Methode $().each(), die über jQuery-Objekte iteriert, kann diese Methode zum Iterieren über jedes beliebige Objekt verwendet werden. Erfordert normalerweise zwei Parameter

Objekt: Das Objekt oder Array, das durchlaufen werden muss.

Rückruf: Die von jedem Mitglied/Element ausgeführte Rückruffunktion.

Die Rückruffunktion hat zwei Parameter: Der erste ist das Mitglied des Objekts oder der Index des Arrays und der zweite ist die entsprechende Variable oder der entsprechende Inhalt. Wenn Sie die Each-Schleife verlassen müssen, können Sie dafür sorgen, dass die Rückruffunktion „false“ zurückgibt und andere Rückgabewerte ignoriert werden.

Durchlaufen Sie ein Array und verwenden Sie dabei sowohl den Elementindex als auch den Inhalt. Beispiele sind wie folgt:

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

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

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

Natürlich können Sie den Instanzaufruf auch direkt nutzen

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

Tatsächlich handelt es sich bei der Instanzmethode (Prototyp) im Quellcode auch um eine aufgerufene statische Methode. Um jede Methode zu analysieren, müssen Sie also nur ihre statische Methode analysieren. Der Instanzaufruf ist nur ein Sonderfall der Verwendung statischer Methoden.

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

Übergeben Sie dieses Objekt in der Prototyp-Methode direkt als zu durchlaufendes Objekt. Das Folgende ist der Quellcode der statischen Methode

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

Es gibt nicht viele Dinge. Zu diesem Zeitpunkt sollten wir darauf achten, dass die von uns häufig verwendeten Handbücher normalerweise zwei Parameter verwenden. Im Quellcode können drei Parameter akzeptiert werden. Der dritte Parameter ist ein Array, das als Parameter der Rückruffunktion übergeben wird.

Deklarieren Sie zunächst einige Variablen i, Name und Länge, um zu unterscheiden, ob es sich bei dem Parameter um ein Array oder ein Objekt handelt Der Parameter ist eine Funktion oder das Längenattribut existiert nicht, der Rest wird als Arrays oder arrayähnlich behandelt.

isObj = length === undefiniert || jQuery.isFunction( object );
Dieser Satz ist sehr prägnant geschrieben und verwendet die Rangfolge der zuerst auszuführenden Operatoren ===

Tatsächlich ist diese Art der Beurteilung nicht sehr präzise, ​​es handelt sich lediglich um eine grobe Unterscheidung, wie zum Beispiel:

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

Dann basiert die Unterscheidung darauf, ob der dritte Parameter hinzugefügt wird. Schauen wir uns zunächst die Situation an, ohne ihn hinzuzufügen, nämlich

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

Unterscheiden Sie Arrays und Objekte anhand der isObj-Variablen. Verwenden Sie eine for-Schleife für Arrays und eine for...in-Schleife für Objekte. Bei jeder Ausführung der Schleife wird eine Rückruffunktion ausgeführt und das aktuelle Schleifenarray erstellt oder Objektschlüssel und -wert werden ausgeführt, die hier verwendete Aufrufmethode, der erste Parameter ist „this“ der Funktion, dh der Wert der aktuellen Schleife wird als this verwendet, die nächsten beiden sind Schlüssel und Wert oder Zeiger und Wert, also verwenden wir die Callback-Funktion in der Schleife. Der zweite Parameter ist derselbe wie dieser. Zum Beispiel:

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

Für den Fall, dass der dritte Parameter hinzugefügt wird, wird die Methode „Apply“ zum Übertragen von Parametern verwendet. Diese zeigt weiterhin auf den aktuellen Wert, aber args ist der dritte Parameter wird übergeben, und die Rückruffunktion kann so viele Parameter verwenden, wie das Array hat. Hierbei ist zu beachten, dass der dritte ein js-Original-Array-Format sein muss und kein Klassenarray oder jQuery-Objekt sein darf, da sonst ein Fehler auftritt gemeldet werden, da die Apply-Methode nicht unterstützt wird. Wenn die Rückruffunktion „false“ zurückgibt, wird die Schleife übersprungen. Beispielsweise können wir nur das Index-Array mit ungerader Nummer verarbeiten. Wenn es sich um ein Element mit gerader Nummer handelt, führen Sie einfach „return false“ in der Rückruffunktion <🎜 aus >

return object;

Zum Schluss das ursprüngliche Objekt oder Array usw. zurückgeben.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.