首頁 > 文章 > web前端 > JQuery中$.each的使用方法以及和$(selector).each()的區別

JQuery中$.each的使用方法以及和$(selector).each()的區別

伊谢尔伦原創: 2017-06-17 14:37:47919瀏覽

each()方法能讓DOM迴圈結構簡潔，不容易出錯。 each()函數封裝了十分強大的遍歷功能，使用也很方便，它可以遍歷一維數組、多維數組、DOM, JSON 等等，在javaScript開發過程中使用$each可以大幅的減輕我們的工作量。

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]);
});

其實arr1為一個二維數組，item相當於取每一個一維數組，
item[0]相對於取每一個一維數組裡的第一個值
所以上面這個each輸出分別為：1 4 7

一個通用的遍歷函數, 可以用來遍歷物件和數組. 數組和含有一個length屬性的偽數組對象(偽數組對像如function的arguments對象)以數字索引進行遍歷,從0到length-1, 其它的對象通過的屬性進行遍歷.

$.each()與$(selector).each()不同, 後者專用於jquery物件的遍歷, 前者可用於遍歷任何的集合(無論是數組或物件),如果是數組,回調函數每次傳入數組的索引和對應的值(值也可以透過this 關鍵字取得,但javascript總是會包裝this 值作為一個物件—儘管是一個字串或是一個數字),方法會傳回被遍歷物件的第一個參數。

範例:——傳入陣列

<!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>

//输出
 
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>

//输出
 
flammable: inflammable
duh: no duh

範例:——回呼函數中return false時可以退出$.each(), 如果回傳一個非false 即會像在for迴圈中使用continue 一樣, 會立即進入下一個遍歷

<!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>

// 输出
 
Mine is one. – 1
Mine is two. – 2
Mine is three. – 3
- 4
- 5

範例:———遍歷數組的項目, 傳入index和value

<!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>

範例:—－遍歷物件的屬性,傳入key和value

<!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. 如果不想輸出第一項(使用retrun true)進入下一遍歷

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
 
var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
if (index == 0) {
return true; // equivalent to ‘continue&#39; with a normal for loop
}
// else do stuff…
alert (index + “: “+ value);
});
 
</script>
</body>
</html>

###############

以上是JQuery中$.each的使用方法以及和$(selector).each()的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery操作select实例集合大全下一篇：jquery操作select实例集合大全

看更多

JQuery中$.each的使用方法 以及和$(selector).each()的區別

相關文章

JQuery中$.each的使用方法以及和$(selector).each()的區別