用jquery的each方法遍历json对象

最新推荐文章于 2023-02-23 14:24:52 发布

原创最新推荐文章于 2023-02-23 14:24:52 发布 · 6.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript

jquery

本文展示了如何使用jQuery的each方法遍历JSON对象，包括声明JSON对象、调用each方法并显示结果。

用jquery的each方法遍历JSON对象的方法如下：

声明一个JSON对象：

var jsonStu=[{"name":"张三","score":"90"},{"name":"李四","score":"80"},{"name":"王五","score":"70"}];
2.调用each方法：

<span style="font-family: Arial, Helvetica, sans-serif;">一个简单的例子：</span>

<!DOCTYPE html>
<!--1.首先定义一个json对象jsonStu,保存学生的"姓名"和"分数"信息.-->
<!--2.然后,通过调用$.each()工具函数,遍历该数据,分别获取"姓名"和"分数"信息. $.each(jsonStu,function(index,data)-->
<!--3.最后,将遍历后获取的整个内容显示在页面中.-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JSON对象</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script>
        var jsonStu=[{"name":"张三","score":"90"},{"name":"李四","score":"80"},{"name":"王五","score":"70"}];  
        //创建一个json对象
         alert("Loading……");
         $(document).ready(function(){
            var result = "";
           $.each(jsonStu,function(index,data){
                result += "姓名:  " + data.name + "     年龄:   " + data.score + "<br />";
             });


             $('#show').html(result);
         });
    </script>
</head>
<body>
<div id="show"></div>
</body>
</html>

</pre><pre name="code" class="javascript">

标签

#javascript #jquery