Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung in every() von jquery und detaillierte Beispiele seiner Traversal-Methode

伊谢尔伦
Freigeben: 2017-06-19 15:50:11
Original
1364 Leute haben es durchsucht

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 zu verwenden. Sie kann eindimensionale Arrays , mehrdimensionale Arrays , DOM, JSON usw. durchlaufen 🎜> in
JavaScriptDie Verwendung von $each während des Entwicklungsprozesses kann unseren Arbeitsaufwand erheblich reduzieren. Hier sind einige häufige Verwendungen von jedem

1 jeder verarbeitet ein eindimensionales Array


  var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);   
      alert(val);
  });
Nach dem Login kopieren
alert(i) gibt 0 aus , 1, 2

alert(val) gibt aaa, bbb, ccc aus

2. Jeder behandelt

zweidimensionales Array  

 var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
  $.each(arr, function(i, item){      
      alert(i);   
      alert(item);      
  });
Nach dem Login kopieren
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 🎜>Nach einer geringfügigen Änderung der Verarbeitung dieses zweistelligen Arrays

gibt Alert(j) 0, 1, 2, 0, 1, 2, 0, 1, 2
var arr = [[&#39;a&#39;, &#39;aa&#39;, &#39;aaa&#39;], [&#39;b&#39;, &#39;bb&#39;, &#39;bbb&#39;], [&#39;c&#39;, &#39;cc&#39;, &#39;ccc&#39;]]      
   $.each(arr, function(i, item){      
        $.each(item,function(j,val){
            alert(j);
            alert(val);
     }); 
});
Nach dem Login kopieren


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

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

Hier gibt Warnung (Schlüssel) eins zwei drei aus. Ausgabe eins, 1, zwei, 2, drei , 3 Warum ist der Schlüssel hier keine Zahl, sondern ein Attribut? Da das JSON-Format eine Menge ungeordneter Attribute und Werte ist, wie kann es Zahlen geben?

Und dieser Wert entspricht obj[key]
var obj = { one:1, two:2, three:3};      
   each(obj, function(key, val) {      
        alert(key);   
        alert(val);      
   });
Nach dem Login kopieren



ecah verarbeitet dom-Elemente. Hier wird ein Eingabeformularelement als Beispiel verwendet.
Wenn Sie einen Code wie diesen in Ihrem Dom haben


und dann jeden wie folgt verwenden


<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"/>
Nach dem Login kopieren
Dann gibt Alert (val) [object HTMLInputElement] aus, da es sich um ein Formularelement handelt.


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

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

alert(val.name); gibt aaa, bbb, ccc, ddd aus, wenn Sie dies verwenden. name gibt das gleiche Ergebnis aus

alert(val.value); gibt 111.222.333.444 aus. Wenn this.value verwendet wird, wird das gleiche Ergebnis ausgegeben


jquery beurteilt automatisch anhand der eingehenden Elemente und dann basierend auf Das Beurteilungsergebnis wird von der Apply- oder Call-Methode verarbeitet. In der Implementierung von fn können Sie diesen Zeiger

direkt verwenden, um auf das Array

oder Unterelemente des 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 eines bestimmten Unterelements zurückgegeben wird Mit anderen Worten: Wir können jeden Methodenaufruf nach Erfüllung bestimmter Bedingungen mit der bereitgestellten fn-Funktion beenden. 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

Diese Methode ist dieselbe. Der größte Unterschied zwischen 1 und 1 besteht darin, dass die fn-Methode unabhängig vom Rückgabewert einzeln ausgeführt wird. 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.

Drei Durchlaufmethoden

1. Selektor + Durchlauf $('div').each(function (i ){

i ist der Indexwert

Dies bedeutet, dass jedes

Dom-Objekt

} durchlaufen wird);

2 , Selektor + Traversal

$('div').each(function (index,domEle){

index ist der Indexwert

domEle bedeutet, jedes dom-Objekt zu durchlaufen

});

3. Eine geeignetere Durchlaufmethode

1) Erhalten Sie zuerst ein Sammlungsobjekt

2) Durchlaufen Sie jedes der Sammlungsobjekte Ein Element

var d=$("div");

$.each(d,function (index,domEle){

d ist die zu durchlaufende Sammlung

index ist der Indexwert

domEle bedeutet, jedes Dom-Paar zu durchlaufen

});

Das obige ist der detaillierte Inhalt vonEinführung in every() von jquery und detaillierte Beispiele seiner Traversal-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!