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傳參，，頁面轉義符