$.each遍歷物件陣列程式碼例項

admin發表於2017-03-30
物件陣列

本章節介紹一下如何利用$.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>
$(document).ready(function(){
  var arr=["螞蟻部落","softwhy.com","青島市南區"];
  var str="";
  $.each(arr,function(index,elem){
    str=str+index+":"+elem+"<br/>";
  })
  $("#show").html(str);
})
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>

上面的程式碼實現了遍歷效果，非常的簡單。

關於$.each()方法可以參閱jQuery.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>
$(document).ready(function(){
  var arr=[
    {"webName":"螞蟻部落","url":"softwhy.com"},
    {"webName":"百度","url":"baid.com"} 
  ];
  var str="";
  $.each(arr,function(index,elem){
    str=str+index+":"+elem.url+"<br/>";
  })
  $("#show").html(str);
})
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>

相關文章