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

时间:2019-04-15
本文章向大家介绍使用jquery中$.each()方法来循环一个数据列表,主要包括使用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>

效果图:

 

 

上一页 下一页

原文地址:http://www.manongjc.com/article/103424.html

上一篇:JVM

下一篇:面向对象之多态