$.each()函式遍歷陣列和物件程式碼例項

antzone發表於2017-03-21
函式陣列物件

使用$.each()函式是可以遍歷陣列和物件的，下面就就分享兩段相關的程式碼例項。

一.遍歷陣列:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
var arr=["螞蟻部落","antzone","分享互助","青島市南區"];
$(document).ready(function(){
  $.each(arr,function(){
    $("#show").text($("#show").text()+this)
  });
})
</script> 
</head> 
<body>
<div id="show"></div>
</body>
</html>

上面的程式碼可以將陣列中的元素顯示在div中，this代表當前迴圈函式執行時的陣列元素值。

$.each()函式的第二個引數函式是可以帶引數的，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
var arr=["螞蟻部落","antzone","分享互助","青島市南區"];
$(document).ready(function(){
  $.each(arr,function(index,value){
    $("#show").text($("#show").text()+index+":"+value)
  });
})
</script> 
</head> 
<body>
<div id="show"></div>
</body>
</html>

函式的第一個引數是當前陣列中元素的索引，第二個引數是當前陣列元素的值。

二.遍歷物件:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
var obj={
  webName:"螞蟻部落",
  target:"分享互助",
  address:"青島市南區"
}
 
$(document).ready(function(){
  $.each(obj,function(){
    $("#show").text($("#show").text()+this)
  });
})
</script> 
</head> 
<body>
<div id="show"></div>
</body>
</html>

上面的程式碼可以將物件的屬性值寫入div中，this代表當前物件屬性值。

$.each()函式的第二個函式引數也是可以帶引數的，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
var obj={
  webName:"螞蟻部落",
  target:"分享互助",
  address:"青島市南區"
}
$(document).ready(function(){
  $.each(obj,function(key,value){
    $("#show").text($("#show").text()+key+":"+value)
  });
})
</script> 
</head> 
<body>
<div id="show"></div>
</body>
</html>

第一個引數是屬性名稱，第二個引數是屬性值。

相關文章