suchen

Heim >Web-Frontend >js-Tutorial >Verwendung von $.each in JQuery und der Unterschied zu $(selector).each()

Verwendung von $.each in JQuery und der Unterschied zu $(selector).each()

伊谢尔伦
伊谢尔伦Original
2017-06-17 14:37:471022Durchsuche

Die

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

Beispiel für die Methode „each()“: 

var arr = [ "aaa", "bbb", "ccc" ];
$.each(arr, function(i,a){
alert(i); // i 是循环的序数
alert(a); // a 是值
});
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});

Tatsächlich ist arr1 ein zweidimensionales Array, item entspricht der Aufnahme jedes eindimensionalen Arrays
item[ 0] Relativ zur Annahme des ersten Werts in jedem eindimensionalen Array
Die Ausgabe von jedem oben ist also: 1 4 7

Eine allgemeine Traversierungsfunktion, die verwendet werden kann, um Durchlaufen von Objekten und Arrays. Arrays und Pseudo-Array-Objekte, die ein Längenattribut enthalten (Pseudo-Array-Objekte wie das Argumentobjekt einer Funktion), werden mit einem numerischen Index von 0 bis Länge-1 durchlaufen, und andere Objekte auch wird über das Attribut durchlaufen.

$.each() unterscheidet sich von $(selector).each(). Letzteres wird speziell zum Durchlaufen von JQuery-Objekten verwendet ist ein Array oder ein Objekt). 🎜>javascript umhüllt diesen Wert immer als Objekt – auch wenn es sich um einen String oder eine Zahl handelt), gibt die Methode den ersten Parameter des durchlaufenen Objekts zurück. Beispiel:————Übergabe eines Arrays

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
 
$.each([52, 97], function(index, value) {
alert(index + ‘: ‘ + value);
});
 
</script>
</body>
</html>
Beispiel:————Wenn eine Karte als verwendet wird Sammlung, die Rückruffunktion übergibt ein Schlüssel-Wert-Paar 
//输出
 
0: 52
1: 97

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
 
var map = {
‘flammable&#39;: ‘inflammable&#39;,
‘duh&#39;: ‘no duh&#39;
};
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
});
 
</script>
</body>
</html>
Beispiel: --- Sie können $.each() beenden, wenn Sie im Rückruf false zurückgeben Funktion, wenn sie ein nicht-falsches Ergebnis zurückgibt. Das heißt, genau wie bei der Verwendung von continue in der 
//输出
 
flammable: inflammable
duh: no duh
for-Schleife

wird sofort in die nächste Durchquerung

Beispiel: ---
<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; }
  p#five { color:red; }
  </style>
  <script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
 
<body>
  <p id=”one”></p>
  <p id=”two”></p>
  <p id=”three”></p>
  <p id=”four”></p>
  <p id=”five”></p>
<script>
    var arr = [ "one", "two", "three", "four", "five" ];//数组
    var obj = { one:1, two:2, three:3, four:4, five:5 }; // 对象
    jQuery.each(arr, function() {  // this 指定值
      $(“#” + this).text(“Mine is ” + this + “.”);  // this指向为数组的值, 如one, two
       return (this != “three”); // 如果this = three 则退出遍历
   });
    jQuery.each(obj, function(i, val) {  // i 指向键, val指定值
      $(“#” + i).append(document.createTextNode(” – ” + val));
    });
</script>
</body>
</html>
Elemente des Arrays durchlaufen 
// 输出
 
Mine is one. – 1
Mine is two. – 2
Mine is three. – 3
- 4
- 5
, Index und Wert übergeben


Beispiel: - Eigenschaften des Objekts durchlaufen , übergeben Sie Schlüssel und Wert 

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each( [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;], function(i, l){
alert( “Index #” + i + “: ” + l );
});
 
</script>
</body>
</html>

Beispiel für einen Selbstkommentar

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
 
$.each( { name: “John”, lang: “JS” }, function(k, v){
alert( “Key: ” + k + “, Value: ” + v );
});
 
</script>
</body>
</html>

1. Wenn Sie den ersten nicht ausgeben möchten item (verwenden Sie rerun true) und geben Sie die nächste Iteration ein


Das obige ist der detaillierte Inhalt vonVerwendung von $.each in JQuery und der Unterschied zu $(selector).each(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：Eine vollständige Sammlung von JQuery-VorgangsauswahlinstanzenNächster Artikel：Eine vollständige Sammlung von JQuery-Vorgangsauswahlinstanzen

In Verbindung stehende Artikel

Mehr sehen