首页 > Web开发 > 详细

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

时间:2019-04-15 18:01:40      阅读:185      评论:0      收藏:0      [点我收藏+]

定义和用法

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()方法来循环一个数据列表

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!