$.each()方法遍历数组和对象简单对象

快乐打工仔 分类:实例代码

与$.each()方法类似的是$(selector).each()方法,但是后面这个方法一般专注于jquery对象的遍历,而前者则可以用遍历任何的集合(无论是数组或对象)。关于$(selector).each()的用法可以参阅jQuery each()一章节。

关于两个方法的区别可以参阅$.each()与$(selector).each()方法的区别一章节。

一.$.each()遍历数组:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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格式对象就是对象直接量,下面看一段遍历效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
var obj={
  webName:"犀牛前端部落",
  url:"pipipi.net",
  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>

回复

我来回复
  • 暂无回复内容