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": "骑自行车"
}]

jQuery遍历之each方法

猜你喜欢