.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": "騎自行車"
}]