Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erklärung des Unterschieds zwischen $(selector).each() und $.each() von Jquery

Detaillierte Erklärung des Unterschieds zwischen $(selector).each() und $.each() von Jquery

伊谢尔伦
伊谢尔伦Original
2017-06-16 16:20:451188Durchsuche

Wir haben alle die Each-Funktion in Jqurey verwendet und wissen alle, dass es zwei Möglichkeiten gibt, Each() aufzurufen: Eine besteht darin, über $.each() aufzurufen, die andere über $(selector). every() , also was ist der Unterschied zwischen ihnen?

Wenn Sie sich den Jquery-Quellcode ansehen, werden Sie wissen, dass $.each() die Kernimplementierung ist und $(selector).each() der aufgerufene $.each() ist. Lassen Sie uns zunächst $ analysieren .each( ) Quellcode (unten):

Die Funktion „each“ (obj, callback, args) empfängt 3 Parameter: obj – das Objekt oder Array, das durchlaufen werden soll, callback – die Callback-Funktion zu durchlaufen und auszuführen , args – das von Ihnen angegebene Array (ignorieren Sie es zuerst).

Die Implementierung jeder Methode in jQuery verwendet die Aufrufmethode. Erstens ist der Effekt des Arrays bei jedem gleich.

Sie können die Richtung per Anruf ändern.

var testCall = function(obj, callback){
    callback.call(obj, 1);
}

testCall(["1. Ändern Sie den Zeiger davon", "2. Die Funktion kann intern dadurch aufgerufen werden"], function(index){ //Mit der Aufrufmethode ist dies möglich Der Zugriff erfolgt direkt über das Objekt, das als erster Parameter des Aufrufs übergeben wurde.
Die Funktion kann über this aufgerufen werden Verwenden Sie nicht die Aufrufmethode. Diese wird nicht verwendet.

test(["1. Ändern Sie den Zeiger davon", "2. Die Funktion kann dadurch innerhalb der Funktion aufgerufen werden"], function(index){ //Aufrufmethode nicht verwenden , verwenden Sie dies nicht.

warning(this[index]); //undefiniert});
var test = function(obj, callback){
    callback(obj, 1);
}


jQuery.each sollte der durch Aufruf geänderte Punkt sein;
Ich habe mir den jQuery-Quellcode nicht angesehen. Verwenden Sie callback.call, um ihn zu kopieren. Die Implementierungsmethode sollte dieselbe sein.

Hinweis: Wenn der Anruf nicht verwendet wird, kann er nicht in der Rückruffunktion verwendet werden.
$.each([1,2,3], function (index, item) {    console.log({index:index,value:item,_this:this});
});/*
  Object {index: 0, value: 1, _this: Number}
  Object {index: 1, value: 2, _this: Number}
  Object {index: 2, value: 3, _this: Number}
*/

1. Der Fall ohne Argumente

var each = function(arr, callback){
  for( var index = 0 ; index < arr.length ; index++ ){
    callback.call(arr[index], index, arr[index]);
  }
}
each([1,2,3], function (index, item) {
    console.log({index:index,value:item,_this:this});
});/*
  Object {index: 0, value: 1, _this: Number}
  Object {index: 1, value: 2, _this: Number}
  Object {index: 2, value: 3, _this: Number}
*/
Im Allgemeinen werden Argumente nicht häufig verwendet, daher werden wir die Situation, in der (Argumente) wahr sind, nicht diskutieren, d grau im Codeteil, dies ist auch der Kernteil der Funktion every()

Wenn das Objekt, das Sie durchlaufen möchten, ein Array-Typ ist, geben Sie diesen Codeblock ein

 

für Schleife

if(isArray) {
      for(; i < length; i++) {
        value = callback.call(obj[i], i, obj[i]);
        if(value === false) { break; }
      }
    }
Durchlaufen Sie jedes Element des Arrays

und führen Sie dann mit der Aufrufmethode obj[i].callback(i,obj[i]) aus.
Daher beim Schreiben der Rückruffunktion Sie sollten sich darüber im Klaren sein, dass jquery jedes Objekt im Array verwendet, um Ihre Rückruffunktion auszuführen. Die übergebenen Parameter sind gleichzeitig der Index des Elements im Array und das Element, auf das auch die Rückrufmethode verweist das Element; In der nächsten Zeile wird ermittelt, ob die Rückruffunktion einen Wert zurückgegeben hat. Wenn die Rückruffunktion „false“ zurückgibt, wird die Schleife des Arrays verlassen. Wenn das von Ihnen übergebene Objekt auch durchlaufen werden kann, ist der Code derselbe wie bei der Array-Durchquerung oben

Wenn Sie ein Objekt übergeben, verwenden Sie for(x in y)

Durchlaufen Sie die Attribute des Objekts

,

Das Prinzip ist das gleiche wie oben, außer dass es durch das Attribut x innerhalb des Objekts ersetzt wird, um die Rückruffunktion auszuführen, was obj.attr.callback( i,obj.attr);
else {
      for(i in obj) {
          value = callback.call(obj[i], i, obj[i]);
          if(value === false) { break; }
        }
    }
Wenn in der Callback-Funktion false zurückgegeben wird, wird auch die Schleifenoperation beendet.

2. Wenn Argumente vorhanden sind
Beim Aufruf von every() mit dem dritten Parameter wird der folgende Codeblock zur Analyse eingegeben:

Auf die gleiche Weise wird zunächst ermittelt, ob das Objekt, das Sie durchlaufen möchten, ein Array ist. Wenn es sich um ein Array handelt, wird das Element obj[i] des Arrays durchlaufen und obj[i].callback( ausgeführt. args)Achtung! Der hier übergebene Parameter ist das args-Array, das Sie übergeben haben. Dies unterscheidet sich vom args-Parameter ohne. Das heißt, wenn Sie jede Funktion aufrufen und Ihren eigenen Array-Parameter übergeben, werden die Callback-Parameter der Funktion

Die Liste ist das args-Array, das Sie übergeben. Für alles andere gilt das Gleiche wie oben.
if(isArray) {            
   for(; i < length; i++) {
     value = callback.apply(obj[i], args);                
     if(value === false) { break; }
            }
        } else {            
        for(i in obj) {
          value = callback.apply(obj[i], args);                
          if(value === false) { break; 
          }
        }
  }

$(selector).each(callback,args) Funktion empfängt 2 Parameter: callback – die Callback-Funktion, die durchlaufen und ausgeführt werden soll, args – das von Ihnen angegebene Array. Nachdem Sie die Funktion $.each() verstanden haben, ist $(selector).each einfach. Öffnen Sie den Quellcode und stellen Sie fest, dass die Funktion $.each() in $(selector).each aufgerufen wird.
Sie können sehen, dass beim Aufruf von $.each() der obj-Parameter wie folgt geschrieben wird: $(selector). Dies ist der JQuery-Selektor, der ein JQuery

internes Objekt.

 

each: function( callback, args ) {
      return jQuery.each( this, callback, args );
  },

Zusammenfassung: Der Unterschied zwischen $.each() und $(selector).each() besteht darin, dass ersteres alle Objekte oder Arrays durchlaufen kann, während letzteres für JQuery-Selektoren zurückgegeben wird Jquery-interne Objekte werden durchlaufen, ersteres ist leistungsfähiger

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Unterschieds zwischen $(selector).each() und $.each() von Jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn