使用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>

效果圖：