Heim > Artikel > Web-Frontend > 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.
Dieeach()-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
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']
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(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); });
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]
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"/>
$.each($("input:hidden"), function(i,val){ alert(val); alert(i); alert(val.name); alert(val.value); });
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
$("input:hidden").each(function(i,val){ alert(i); alert(val.name); alert(val.value); });
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; }
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.