$.each()方法遍歷陣列和物件簡單物件

admin發表於2017-04-05
陣列物件

與$.each()方法類似的是$(selector).each()方法，但是後面這個方法一般專注於jquery物件的遍歷，而前者則可以用遍歷任何的集合(無論是陣列或物件)。關於$(selector).each()的用法可以參閱jQuery each()一章節。

關於兩個方法的區別可以參閱$.each()與$(selector).each()方法的區別一章節。

一.$.each()遍歷陣列:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
var arr=[1,2,3]; 
var newArr=[];
$.each(arr,function(index,val){
  newArr.push(val+index);
});
$(document).ready(function(){
  $("#antzone").text(newArr);
});
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的程式碼實現了對一維陣列遍歷效果，每一個陣列元素都加上對應的索引值，生成一個新陣列。

當然也可以遍歷二維陣列，具體可以參閱$.each()方法遍歷二維陣列程式碼例項一章節。

二.遍歷json格式物件:

所謂的json格式物件就是物件直接量，下面看一段遍歷效果:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
var obj={
  webName:"螞蟻部落",
  url:"softwhy.com",
  age:2
}
$(document).ready(function(e){
  var str="";
  $.each(obj,function(key,val){ 
   str=str+key+":"+val+"<br/>";
  });
  $("#antzone").html(str);
});
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

相關文章