jQuery遍歷之each方法

.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": "騎自行車"
}]
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章