Detaillierte Erläuterung der Verwendung von jquery.each und Beispielcode

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. 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 auch direkt den Instanzaufruf

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

verwenden Was tatsächlich im Quellcode enthalten ist Die Instanzmethode (Prototyp) ist ebenfalls eine 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 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 Handbücher, die wir häufig verwenden, normalerweise zwei Parameter enthalten Im Allgemeinen werden zwei Parameter verwendet. Tatsächlich können jedoch drei Parameter im Quellcode akzeptiert werden, und 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 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

Dann basiert die Unterscheidung darauf, ob Um einen dritten Parameter hinzuzufügen, werfen wir zunächst einen Blick darauf. Der Fall ohne Zusatz ist, dass

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

Arrays und Objekte anhand der isObj-Variablen „unterscheidet“. Verwenden Sie eine for-Schleife und für Objekte eine for...in-Schleife. Bei jeder Ausführung der Schleife wird eine Rückruffunktion ausgeführt und der Array- oder Objektschlüssel und der Wert der aktuellen Schleife übergeben. Die verwendete Aufrufmethode Hier ist der erste Parameter das „This“ der Funktion, das heißt, der Wert der aktuellen Schleife wird als Rückseite davon verwendet. Die beiden sind Schlüssel und Wert oder Zeiger und Wert, wenn wir also den zweiten Parameter verwenden Wenn Sie die Callback-Funktion in der Schleife verwenden, ist dies dasselbe wie die Verwendung dieser Funktion. Beispiel:

//刚才的例子
 $( 'p' ).each( function(i,n){
    return i+n.text;
  } )
//等价于
 $( 'p' ).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 geändert und die Apply-Methode zum Übergeben verwendet Der Parameter zeigt immer noch auf den aktuellen Wert, aber args, das dritte Parameterarray, wird übergeben. So viele Parameter wie in diesem Array vorhanden sind, kann die Rückruffunktion so viele Parameter wie möglich verwenden Hierbei ist zu beachten, dass das dritte in Form eines js-Original-Sound-Arrays vorliegen muss. Es 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. Beispielsweise können wir nur das Indexarray mit ungerader Nummer verarbeiten. Wenn es sich um ein Element mit gerader Nummer handelt, führen Sie einfach „return false“ in der Rückruffunktion

return object;

Schließlich das ursprüngliche Objekt oder Array usw. zurückgeben.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von jquery.each und Beispielcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!