jquery的each遍历方法

最新推荐文章于 2022-06-04 10:04:57 发布

dishang1614

最新推荐文章于 2022-06-04 10:04:57 发布

阅读量398

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/lingdu87/p/7765141.html

版权

jQuery 的 each 方法，作为一个通用遍历方法，可用于遍历对象和数组。

语法为：

jQuery.each(object, [callback])

回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。

// 遍历数组
$.each( [0,1,2], function(i, n){ console.log( "Item #" + i + ": " + n ); }); // Item #0: 0 // Item #1: 1 // Item #2: 2

// 遍历对象
$.each({ name: "John", lang: "JS" }, function(i, n) { console.log("Name: " + i + ", Value: " + n); }); // Name: name, Value: John // Name: lang, Value: JS

退出循环

尽管 ES5 提供了 forEach 方法，但是 forEach 没有办法中止或者跳出 forEach 循环，除了抛出一个异常。但是对于 jQuery 的 each 函数，如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

$.each( [0, 1, 2, 3, 4, 5], function(i, n){ if (i > 2) return false; console.log( "Item #" + i + ": " + n ); }); // Item #0: 0 // Item #1: 1 // Item #2: 2

案例1：

<style type="text/css">
    .gridtable {
        font-family: verdana,arial,sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
    }
     .gridtable th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #dedede;
    }

     .gridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
    }
</style>

<body>
　　<table class="gridtable" id="myTb">
　　</table>
</body>

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var json = {
            'columns': [{ 'FieldID': 'Column1', 'Title': 'Info Header 1' }, { 'FieldID': 'Column2', 'Title': 'Info Header2' }, { 'FieldID': 'Column3', 'Title': 'Info Header3' }],
            'rows': [{ 'Column1': '1A', 'Column2': '1B', 'Column3': '1C' }, { 'Column1': '2A', 'Column2': '2B', 'Column3': '2C' }]
        };
        var th;
        $.each(json.columns, function (colIndex, col) {
            th+="<th>" + col.Title + "</th>";
        });
        $("#myTb").append("<tr>" + th + "</tr>");

        //行遍历
        $.each(json.rows, function (rowIndex, row) {
            var tr;
            //列遍历
            $.each(json.columns, function (colIndex,col) {
                tr+='<td>'+row[col.FieldID]+'</td>'
            });

            $("#myTb").append('<tr>'+tr+'</tr>');
        });
    });
</script>

案例2：

<body>
<div id="tableBox">
    <table cellspacing="0" cellpadding="0" border="1px solid #ccc" width="480px">
        <thead>
            <tr align="center">
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="tableAdd">
        </tbody>
    </table>
</div>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var jsonName = {"data": [{"num":1,"name":"张三","sex":"男","age":30}, {"num":2,"name":"李四","sex":"男","age":28}, {"num":3,"name":"赵五","sex":"男","age":26}, {"num":4,"name":"王六","sex":"男","age":25}]}
        $.each(jsonName.data,function (rowIndex,col) {//遍历jsonName.data对应的数组
            var str;
            $.each(col,function (name,value) {//遍历数组内的对象
                str += '<td>'+value+'</td>'
            });
            $("#tableAdd").append("<tr align='center'>"+str+"</tr>");
        })
    });
</script>
</body>

转载于:https://www.cnblogs.com/lingdu87/p/7765141.html

dishang1614

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery的each遍历方法

jQuery 的 each 方法，作为一个通用遍历方法，可用于遍历对象和数组。语法为：jQuery.each(object, [callback])回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。// 遍历数组$.each( [0,1,2], function(i, n){ console.log( "Item #"...
复制链接

扫一扫