Detaillierte Erläuterung der Verwendung von jQuery.each

Die jQuery.each-Methode ist eine der zentralen Werkzeugmethoden 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. Normalerweise sind zwei Parameter erforderlich

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. Zum Beispiel:

//例遍对象，同时使用成员名称和变量内容。
 
$.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 die Instanz auch direkt zum Aufruf von

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

Tatsächlich ist die Instanzmethode (Prototyp) im Quellcode auch eine aufgerufene statische Methode. Um jede Methode zu analysieren, müssen Sie also nur ihre statische Methode analysieren mit statischen 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 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. Zunächst sollten wir auf die beiden Parameter achten, die im Allgemeinen in den Handbüchern angegeben sind Wir verwenden im Allgemeinen auch zwei Parameter, aber tatsächlich gibt es drei Parameter, die im Quellcode akzeptiert werden können. Der dritte Parameter ist ein Array und wird als Parameter der Rückruffunktion übergeben.

Deklarieren Sie zunächst einige Variablen i, Name und Länge, um die Schleife vorzubereiten. Dabei dient isObj dazu, zu unterscheiden, ob der Parameter ein Array oder ein Objekt ist, indem beurteilt wird, ob der Parameter eine Funktion ist Das Längenattribut ist nicht vorhanden. Das Urteil lautet, dass es sich um ein Objekt handelt und die anderen als Arrays oder arrayähnliche Objekte verarbeitet werden.

isObj = length === undefiniert ||. jQuery.isFunction( object );

Dieser Satz ist sehr prägnant geschrieben und verwendet die Prioritätsreihenfolge der zuerst auszuführenden Operatoren ===

Tatsächlich ist dies so. Das Urteil ist nicht sehr präzise, ​​es ist nur eine grobe Unterscheidung, zum Beispiel:

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

Die Situation ohne Hinzufügen ist

} 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 verwenden Sie für Objekte for... in der Schleife wird bei jeder Schleife eine Rückruffunktion ausgeführt und die Der Array- oder Objektschlüssel und der Wert der aktuellen Schleife werden übergeben. Bei der hier verwendeten Aufrufmethode ist der erste Parameter „this“ der Funktion, was den Wert der aktuellen Schleife bedeutet. Die beiden folgenden sind Schlüssel und Wert oder Zeiger und Wert. Wenn wir also den zweiten Parameter der Rückruffunktion in der Schleife verwenden, ist dies dasselbe wie dies. 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 Wertübergabemethode der Rückruffunktion und die Apply-Methode geändert Übergeben Sie Parameter, dies zeigt immer noch auf den aktuellen Wert, aber args, das dritte Parameterarray, wird übergeben. So viele Parameter wie dieses Array hat, hat die Rückruffunktion so viele Parameter, wie sie verwenden kann Beachten Sie hier, dass der dritte Parameter js sein muss. Das ursprüngliche Array-Format darf kein Array-ähnliches oder jQuery-Objekt sein, andernfalls wird ein Fehler gemeldet, da die apply-Methode nicht unterstützt wird. Wenn die Rückruffunktion „false“ zurückgibt, wird die Schleife übersprungen. Wenn es sich beispielsweise um ein Element mit gerader Nummer handelt, können wir „return false“ in der Rückruffunktion

Geben Sie abschließend das ursprüngliche Objekt oder Array usw. zurück.

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

return object;

Ausführlichere Artikel zur Verwendung von jQuery.each finden Sie auf der chinesischen PHP-Website!