.each() 方法就是一个for循环的迭代器,它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)
1.写法
jQuery选择器.each(),如$('div').each();或jQuery对象.each(),如$.each();。
2.参数
2.1.data:可选参数,被遍历的数据集,如数组或JSON数据。此参数上承外层getJSON等数据获取方法中回调函数的data,下接本方法中自身后面的回调函数第二个参数;
$.getJSON(url,function(data){
$.each(data,function(index,element){
//这里遍历到的每一个element都源自data
//即循环解析源数据data
})
})
2.2.回调函数function():遍历操作的主体;
2.3.可选的附加参数。
3.关于回调函数
遍历的主要操作都发生在回调函数中,此函数的参数情形有以下几种:
3.1.没有参数
如:
$('li').each(function(){
//对<li>标签集进行一些操作
})
3.2.一个参数
如:
$('li').each(function(index){
//位置标记index
//操作所有或特定位置的单个的<li>
})
3.3.两个参数,主流用法
如:
$('li').each(function(index,element){
//index为位置标记
//element为遍历到的每一个<li>
})
对于两个参数的意义,又分不同情形,情况1:操作的目标为数组,则第一个参数是下从标(0,1,2,……),第二个参数是下坐标对应的数据对象;情况2:json数据,第一个参数是key键(“name”),第二个参数是key对应的值(“张三”)。具体情形因解析的对象而异。
4.示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用getJSON()方法异步加载JSON格式数据</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜欢的一项运动</span>
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<!--展示最喜欢的一项运动-->
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("mydata/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
})
});
</script>
</body>
</html>
JSON数据文件(url:"mydata/sport.json")
[{
"name": "足球"
},{
"name": "散步"
},{
"name": "篮球"
},{
"name": "乒乓球"
},{
"name": "骑自行车"
}]