Anleitung zur Verwendung der Methode $each() in jquery_jquery

$.each() unterscheidet sich von $(selector).each(). Letzteres wird speziell zum Durchlaufen von JQuery-Objekten verwendet. Ersteres kann zum Durchlaufen jeder Sammlung (ob es sich um ein Array oder ein Objekt handelt) verwendet werden. Wenn es sich um ein Array handelt, übergibt die Rückruffunktion den Index des Arrays und den entsprechenden Wert (der Wert kann auch über das Schlüsselwort this abgerufen werden, aber JavaScript umschließt diesen Wert immer als Objekt – unabhängig davon, ob es sich um eine Zeichenfolge oder einen String handelt). eine Zahl) und die Methode gibt das durchquerte Objekt zurück. Ein Parameter.

Die

each()-Methode kann die DOM-Schleifenstruktur prägnant und weniger fehleranfällig machen. Die Funktion every() kapselt eine sehr leistungsstarke Traversierungsfunktion und ist sehr praktisch. Sie kann eindimensionale Arrays, mehrdimensionale Arrays, DOM, JSON usw. durchlaufen.
Die Verwendung von $each während des JavaScript-Entwicklungsprozesses kann unsere Arbeitsbelastung erheblich reduzieren.

Hier sind einige häufige Verwendungen von jedem

jeder verarbeitet ein eindimensionales Array

var arr1 = [ "aaa", "bbb", "ccc" ]; 
$.each(arr1, function(i,val){ 
alert(i); 
alert(val);
});

alert(i) gibt 0, 1, 2 aus
alarm(val) gibt aaa, bbb, ccc

aus

Jedes verarbeitet zweidimensionale Arrays

　　var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 
　　$.each(arr, function(i, item){ 
alert(i); 
alert(item); 
　　});

arr2 ist ein zweidimensionales Array, und item entspricht der Aufnahme jedes Arrays in diesem zweidimensionalen Array.
item[0] ist relativ zur Annahme des ersten Werts in jedem eindimensionalen Array
alarm(i) gibt 0, 1, 2 aus, da dieses zweidimensionale Array 3 Array-Elemente
enthält warning(item) wird als ['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']<🎜 ausgegeben >

Nachdem die Verarbeitung dieses zweistelligen Arrays leicht geändert wurde

var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 
　　$.each(arr, function(i, item){ 
　　$.each(item,function(j,val){
　　　　 alert(j);
　　　　alert(val);
　}); 
});

alert(j) gibt 0, 1, 2, 0, 1, 2, 0, 1, 2 aus

alert(val) wird als a, aa, aaa, b, bb, bbb, c, cc, ccc ausgegeben

jeder verarbeitet JSON-Daten, dieser ist noch leistungsfähiger, er kann jedes Attribut durchlaufen

　　var obj = { one:1, two:2, three:3}; 
　　each(obj, function(key, val) { 
　　alert(key); 
　　alert(val); 
　　});

Hier gibt die Warnung (Taste) eins, zwei, drei aus

alarm(val) gibt eins, 1, zwei, 2, drei, 3 aus
Warum ist der Schlüssel hier keine Zahl, sondern ein Attribut, weil das JSON-Format eine Menge ungeordneter Attributwerte ist? Wo sind die Zahlen?
Und dieser Wert entspricht obj[key]

ecah verarbeitet DOM-Elemente. Hier wird ein Eingabeformularelement als Beispiel verwendet.

Wenn Sie einen Code wie diesen in Ihrem Dom haben

<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>

Dann verwenden Sie jedes wie folgt

$.each($("input:hidden"), function(i,val){ 
alert(val);
alert(i);
alert(val.name);
alert(val.value); 
});

Alert(val) gibt dann [object HTMLInputElement] aus, da es sich um ein Formularelement handelt.

alert(i) gibt 0, 1, 2, 3 aus

alert(val.name); gibt aaa, bbb, ccc, ddd aus. Wenn this.name verwendet wird, wird das gleiche Ergebnis ausgegeben

warning(val.value); gibt 111.222.333.444 aus. Wenn Sie this.value verwenden, wird das gleiche Ergebnis ausgegeben

Wenn Sie den obigen Code in die folgende Form ändern

$("input:hidden").each(function(i,val){
alert(i);
alert(val.name);
alert(val.value); 
});

Wie Sie sehen, sind die Ausgabeergebnisse die gleichen. Was den Unterschied zwischen den beiden Schreibmethoden betrifft, weiß ich noch nicht. Diese Änderung führt zu denselben Ergebnissen, wenn sie auf die oben genannten Array-Operationen angewendet wird.

Auf diese Weise wurden die tatsächlichen Ergebnisse mehrerer Beispiele beantwortet. Dann studieren Sie weiter, man kann nie wissen, was passiert und warum.

Aus den obigen Beispielen können wir ersehen, dass sowohl jQuery- als auch jQuery-Objekte diese Methode implementieren. Bei jQuery-Objekten wird die Each-Methode einfach delegiert: Das jQuery-Objekt wird als erster Parameter an die Each-Methode von jQuery übergeben.

Schauen Sie sich die Implementierung jedes einzelnen in jQuery an (Internetauszug)

function (object, callback, args) {
//该方法有三个参数:进行操作的对象obj，进行操作的函数fn，函数的参数args
var name, i = 0,length = object.length;
if (args) {
if (length == undefined) {
for (name in object) {
if (callback.apply(object[name], args) === false) {
break;
}
}
} else {
for (; i < length;) {
if (callback.apply(object[i++], args) === false) {
break;
}
}
}
} else {
if (length == undefined) {
for (name in object) {
if (callback.call(object[name], name, object[name]) === false) {
break;
}
}
} else {
for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {}
/*object[0]取得jQuery对象中的第一个DOM元素，通过for循环，
得到遍历整个jQuery对象中对应的每个DOM元素，通过 callback.call( value,i,value);
将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；
其中callback是类似于 function(index, elem) { ... } 的方法。
所以就得到 $("...").each(function(index, elem){ ... });
*/
}
}
return object;
}

jquery trifft automatisch eine Beurteilung basierend auf den eingehenden Elementen und verwendet dann die Apply- oder Call-Methode basierend auf dem Beurteilungsergebnis. In der Implementierung von fn können Sie diesen Zeiger direkt verwenden, um auf die Unterelemente des Arrays oder Objekts zu verweisen.

1.obj-Objekt ist ein Array Die

jede Methode ruft die Fn-Funktion nacheinander für die Unterelemente im Array auf, bis das durch den Aufruf eines bestimmten Unterelements zurückgegebene Ergebnis falsch ist. Mit anderen Worten, wir können es mit der bereitgestellten Fn-Funktion verarbeiten Stellen Sie sicher, dass bestimmte Bedingungen erfüllt sind. Wenn jede Methode den arg-Parameter bereitstellt, ist der vom fn-Funktionsaufruf übergebene Parameter arg, andernfalls: der Unterelementindex, das Unterelement selbst

2.obj-Objekt ist kein Array

Der größte Unterschied zwischen dieser Methode und 1 besteht darin, dass die fn-Methode nacheinander ausgeführt wird, ohne den Rückgabewert zu berücksichtigen. Mit anderen Worten: Alle Eigenschaften des obj-Objekts werden von der fn-Methode aufgerufen, auch wenn die fn-Funktion false zurückgibt. Die im Aufruf übergebenen Parameter ähneln 1.

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