Anleitung zur Verwendung der Methode $each() in jquery

Die Funktion „each“ in jQuery ist sehr praktisch. Die Funktion „$.each()“ kapselt eine sehr leistungsfähige Traversalfunktion. Sie kann eindimensionale Arrays und mehrdimensionale Arrays durchlaufen , DOM, JSON Warten Sie, die Verwendung von $each im JavaScript-Entwicklungsprozess kann unsere Arbeitslast erheblich reduzieren. Hier ist eine einfache Funktion, die jedes nachahmt und nur Objekte vom Array-Typ verarbeiten kann.

$.each() unterscheidet sich von $(selector).each(). Letzteres wird speziell zum Durchlaufen von JQuery-Objekten verwendet. Ersteres kann zum Durchlaufen jeder Sammlung verwendet werden (ob es sich um ein Array oder ein Array handelt). Wenn es sich um ein Array handelt, RückruffunktionÜbergeben Sie jedes Mal 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 ein Objekt – auch wenn es eine Zeichenfolge oder eine Zahl ist), gibt die Methode den ersten Parameter des Objekts zurück, das von durchlaufen wird. Die

each()-Methode kann die DOM-Schleife erstellen Struktur prägnant und weniger fehleranfällig. 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 erheblich sein erleichtern uns die Arbeit.

Hier sind einige häufige Verwendungen von each

each verarbeitet eindimensionale Arrays

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

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

jede Verarbeitungzweidimensionales Array

　　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] relativ zur Annahme des ersten Werts in jedem eindimensionalen Array
alert(i) gibt 0, 1, 2 aus, da dieses zweidimensionale Array 3 Array-Elemente enthält
alert(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

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

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

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

Hier gibt „alert(key)“ eins, zwei, drei aus

alert(val) gibt „eins, 1, zwei, 2“ aus , drei, 3
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 jeden 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 Sie this.name verwenden, wird es ausgegeben Ausgabe Das gleiche Ergebnis

alert(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 einfach die Each-Methode delegiert: Das jQuery-Objekt wird als erster Parameter an die Each-Methode von jQuery übergeben.

Sehen 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 wird basierend auf dem Eingang automatisch fortfahren Elemente Beurteilung, und übernehmen Sie 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

jede Methode ruft die fn-Funktion nacheinander für die Unterelemente im Array auf, bis das Ergebnis durch den Aufruf von a zurückgegeben wird Ein bestimmtes Unterelement ist falsch, das heißt, wir können es mit der bereitgestellten fn-Funktion verarbeiten und den jeweiligen Methodenaufruf beenden, nachdem es bestimmte Bedingungen erfüllt. Wenn jede Methode den arg-Parameter bereitstellt, ist der vom fn-Funktionsaufruf übergebene Parameter arg, andernfalls: der Unterelementindex, das Unterelement selbst

2.obj Das 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 euch allen.

Das obige ist der detaillierte Inhalt vonAnleitung zur Verwendung der Methode $each() in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!