码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-04-15 17:57:06      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:col   plist   lis   技术   func   执行   end   com   对象   

定义和用法

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>

效果图:

技术图片

 

 

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

标签:col   plist   lis   技术   func   执行   end   com   对象   

原文地址:https://www.cnblogs.com/mica/p/10711970.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!