使用jquery中$.each()方法来循环一个数据列表

定义和用法

jQuery.each() 函数用于遍历指定的对象和数组。

语法

$.each( object, callback )

参数	描述
object	Object类型 指定需要遍历的对象或数组。
callback	Function类型 指定的用于循环执行的函数。

 

通过这个方法可以将工作中遇到的数据列表如商城里面的商品列表等很好的进行循环，简单方便，下面就是我写的一个案例：

当然这个这个数组对象是我自己模拟的，实际工作中我们只需要根据后台给的接口来进行操作。

html:

    <div class="index">
        <h1>
            首页
        </h1>
        <ul class="shop_box">

        </ul>
        <button id="btn">点击</button>
    </div>

js：

 <script>
        $(function () {
            var con = [
                {
                    name: '小王',
                    age: 18
                },
                {
                    name: '小张',
                    age: 19
                },
                {
                    name: '小李',
                    age: 20
                },
                {
                    name: '小何',
                    age: 21
                },
                {
                    name: '小陆',
                    age: 22
                },
            ]

            var html = '';
            $.each(con, function (k, v) {  // 这里的函数参数是键值对的形式，k代表键名，v代表值
                html += '<li class="shopBox">' +
                    '<div class="ShopListName">' + con[k].name + '</div>' +
                    '<div class="age">' + con[k].age + '</div>' +
                    '</li>'
            });
            $(".index").append(html);
        })

    </script>

效果图：