Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der every()-Methode in jquery anhand von Beispielen

Detaillierte Erläuterung der every()-Methode in jquery anhand von Beispielen

伊谢尔伦
Freigeben: 2017-06-16 16:10:12
Original
1330 Leute haben es durchsucht

Die

each()-Funktion ist eine Werkzeugfunktion, die praktisch von allen Frameworks bereitgestellt wird. Mit ihr können Sie die Attributwerte von Objekten und Arrays durchlaufen und verarbeiten. Sowohl jQuery- als auch jQuery-Objekte implementieren diese Methode. Bei jQuery-Objekten wird die Each-Methode einfach delegiert: Das jQuery-Objekt wird als erster Parameter an die Each-Methode von jQuery übergeben. Mit anderen Worten: Die von jQuery bereitgestellte Each-Methode ist alle Unterelemente Das durch Parameter 1 bereitgestellte Objekt wird nacheinander aufgerufen. Die vom jQuery-Objekt bereitgestellte Methode „each“ ruft nacheinander die Unterelemente in jQuery auf.

Hier sind einige häufig verwendete Verwendungen von jedemalert(i) gibt 0, 1, 2 ausalert(val) gibt aaa, bbb, ccc aus

2. Jeder behandelt zweidimensionales Array

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

arr2 ist ein zweidimensionales Array, und item entspricht der Übernahme 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 arr2 = [[&#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){      
      alert(i);   
      alert(item);      
  });
Nach dem Login kopieren


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

alert(val) gibt a, aa, aaa, b, bb, bbb, c, cc, ccc aus

jeder, um JSON-Daten zu verarbeiten, dieser jedes Es ist noch mehr leistungsstark, es kann jedes Attribut durchlaufen

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
Hier gibt alarm(key) eins zwei drei aus

alert(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 Attribute und Werte ist? Wo sind die Zahlen?

Und dieser Wert entspricht obj[key]

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

var obj = { one:1, two:2, three:3};      
   each(obj, function(key, val) {      
        alert(key);   
        alert(val);      
   });
Nach dem Login kopieren
Wenn Sie einen Code wie diesen in Ihrem Dom haben


< Eingabename = "bbb" type="hidden" value="222" />

Dann verwenden Sie jedes wie folgt


Dann gibt alarm(val) [object HTMLInputElement] aus, weil es so ist ein Formularelement.


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


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 Sie this.value verwenden, wird das gleiche Ergebnis

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

each(callback)

für jede Übereinstimmung ausgegeben Das Element dient als Kontext zum Ausführen einer Funktion.

bedeutet, dass jedes Mal, wenn die übergebene Funktion ausgeführt wird, das Schlüsselwort this in der Funktion auf ein anderes DOM-Element verweist (jedes Mal ein anderes passendes Element). Darüber hinaus wird bei jeder Ausführung der Funktion ein numerischer Wert, der die Position des Elements als Ausführungsumgebung in der Menge übereinstimmender Elemente darstellt, als Parameter an die Funktion übergeben (eine Ganzzahl beginnend bei Null). Die Rückgabe von „false“ stoppt die Schleife (genau wie die Verwendung von „break“ in einer normalen Schleife). Gibt „true“ zurück, um zur nächsten Schleife zu springen (genau wie die Verwendung von „
continue

“ in einer normalen Schleife).

Der folgende Rückruf ist die
Rückruffunktion

, die die Operation angibt, die beim Durchlaufen der Elemente ausgeführt werden soll. Beginnen wir unten mit einem einfachen Beispiel:

Iterieren Sie über zwei Bilder und legen Sie deren SRC-Attribute fest. Hinweis: Hier bezieht sich dies auf das DOM-Objekt und nicht auf das jQuery-Objekt. Die Methode each() gibt eine Funktion an, die für jedes übereinstimmende Element ausgeführt werden soll.
Tipp: Die Rückgabe von false kann verwendet werden, um die Schleife vorzeitig zu stoppen. Syntax $(selector).each(function(index,element)) Parameterbeschreibung
function(index,element) Erforderlich. Gibt die Funktion an, die für jedes übereinstimmende Element ausgeführt werden soll. •index – die Indexposition des Selektors •element – ​​das aktuelle Element (der Selektor „dieser“ kann auch verwendet werden)

$("button").click(function(){ 
$("li").each(function(){ 
alert($(this).text()) 
}); 
});
Nach dem Login kopieren

那怎么跳出each呢 
jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后,要跳出这个循环。
javascript的跳出循环一般用break. 
同事遇到这个问题,下意识 的用了break,想跳出这个循环。结果报错 
SyntaxError: unlabeled break must be inside loop or switch 
经查,应该用一个 在回调函数里return false即可,大多数jq的方法都是如此的 

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der every()-Methode in jquery anhand von Beispielen. 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