jQuery json遍历渲染到页面并且拼接html

本文转载自查看原文 2021-01-12 00:00 322

jQuery 处理 json遍历在页面中显示，并且拼接html。

 1 <title>json多维数组遍历渲染</title>
 2 
 3     <body>
 4         <div class="box">
 5 
 6         </div>
 7     </body>
 8 
 9         <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
10         <script>
11             var manyArr = [{
12                 "id": 1,
13                 "onitem2vel": "一级目录1",
14                 "twoArr": [{
15                     "id": 1,
16                     "title": "二级目录1-1",
17                     "threeArr": [{
18                         "content": "三级目录1-1-1",
19                         "url": "http://www.baidu.com"
20                     }, {
21                         "content": "三级目录1-1-2",
22                         "url": "http://www.baidu.com"
23                     }, {
24                         "content": "三级目录1-1-3",
25                         "url": "http://www.baidu.com"
26                     }]
27                 }, {
28                     "id": 2,
29                     "title": "二级目录1-2",
30                     "threeArr": [{
31                         "content": "三级目录1-2-1",
32                         "url": "http://www.baidu.com"
33                     }, {
34                         "content": "三级目录1-2-2",
35                         "url": "http://www.baidu.com"
36                     }, {
37                         "content": "三级目录1-2-3",
38                         "url": "http://www.baidu.com"
39                     }]
40                 }]
41             }, {
42                 "id": 2,
43                 "onitem2vel": "一级目录2",
44                 "twoArr": [{
45                     "id": 1,
46                     "title": "二级目录2-1",
47                     "threeArr": [{
48                         "content": "三级目录2-1-1",
49                         "url": "http://www.baidu.com"
50                     }, {
51                         "content": "三级目录2-1-2",
52                         "url": "http://www.baidu.com"
53                     }, {
54                         "content": "三级目录2-1-3",
55                         "url": "http://www.baidu.com"
56                     }]
57                 }, {
58                     "id": 2,
59                     "title": "二级目录2-2",
60                     "threeArr": [{
61                         "content": "三级目录2-2-1",
62                         "url": "http://www.baidu.com"
63                     }, {
64                         "content": "三级目录2-2-2",
65                         "url": "http://www.baidu.com"
66                     }, {
67                         "content": "三级目录2-2-3",
68                         "url": "http://www.baidu.com"
69                     }]
70                 }]
71             }];
72 
73             $(function() {
74                 var htmls = '';
75                 $.each(manyArr, function(i, item1) {
76                     htmls += '<div class="carea">' +
77                         '<h2>' + item1.onitem2vel + '</h2>' +
78                         '<ul class="carea-list">';
79 
80                     $.each(item1.twoArr, function(j, item2) {
81                         htmls += '<li>' +
82                             '<a href="javascript:;">' + item2.title + '</a>' +
83                             '<ul class="carea-list-there">';
84 
85                         $.each(item2.threeArr, function(k, item3) {
86                             htmls += '<li>' +
87                                 '<a href="' + item3.url + '">' + item3.content + '</a>' +
88                                 '</li>';
89                         })
90                         htmls += '</ul></li>';
91                     });
92                     htmls += '</ul></div>';
93                 });
94                 $(htmls).appendTo($(".box"));
95             });
96         </script>
97

效果如下：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 页面渲染html的过程 jquery 对 Json 的各种遍历 jQuery html和遍历 vue数组遍历动态渲染到页面 jQuery属性遍历、HTML操作 jquery 向页面追加HTML go 数据渲染到html页面 02 在html页面中展示JSON js和jQuery获取页面html js拼接HTML onclick传参，，页面转义符