jQuery教程之$.each() - 遍历json和数组

最新推荐文章于 2020-03-10 20:10:44 发布

原创最新推荐文章于 2020-03-10 20:10:44 发布 · 970 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #遍历 #json #数据 #函数

jQuery学习教程专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用jQuery中的$.each方法来遍历JSON数据和数组，详细展示了如何通过回调函数获取每个元素的键值对，并通过示例代码演示了在控制台中输出遍历结果的过程。

遍历json数据

$.each()方法有两个参数，第一个参数传递要遍历的数据，可以是数组也可以是json。第二个参数是一个Function。

Function可以传递两个参数：如果要遍历的数据是json时，第一个参数为json数据的key，第二个参数为json数据的value。

<script>
    var json = {
        'width' : '20px' ,
        'height' : '30px' ,
        'border-radius' : '4px'
    };

    $.each(json , function(key  , value){
         console.log('当前的键是：' + key + "，当前的值是:" + value );
    });

</script>

最后我们会在控制台看到如下输出结果：

当前的键是：width，当前的值是:20px
当前的键是：height，当前的值是:30px
当前的键是：border-radius，当前的值是:4px

Function可以传递两个参数：如果要遍历的数据是数组时，第一个参数为数组数据的下标，第二个参数为数组数据的value。

var arr = ['a','b','c'];
$.each( arr , function( index , value){
    console.log( '当前的下标是：' + index + "，当前的值是:" + value);
});

最后我们会在控制台看到如下输出结果：

当前的下标是：0，当前的值是:a
当前的下标是：1，当前的值是:b
当前的下标是：2，当前的值是:c