jQuery json遍历渲染到页面并且拼接html
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
效果如下：
jQuery json遍历渲染到页面并且拼接html的更多相关文章
- jquery json遍历和动态绑定事件
<div id='tmpselectorList' style='border: 1px solid grey;max-height: 150px;position:absolute;text- ...
- json原理和jquey循环遍历获取所有页面元素
1.json原理: javascript object notation (javascript 对象表示法) 是一种轻量级的数据交换语言,由javascript衍生而出,适用于.NET java c ...
- jquery $.each遍历json数组方法
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/ ...
- JQuery + JSON作为前后台数据交换格式实践
JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...
- ajax获取数据后怎么去渲染到页面？
$.ajax({ url:"apiAttachmentAction_uploadAttachment.action", type:"post", data:fo ...
- JQuery each遍历A标签获取href 和 里面指定的值
JQuery each遍历A标签获取href $('.scol_subject').each(function(){ var href = $(this).attr('href'); $(this). ...
- 基于 el-form 封装一个依赖 json 动态渲染的表单控件
nf-form 表单控件的功能 基于 el-form 封装了一个表单控件,包括表单的子控件. 既然要封装,那么就要完善一些,把能想到的功能都要实现出来,不想留遗憾. 毕竟UI库提供的功能都很强大了,不 ...
- (Spring4 json入门)Spring4+SpringMVC+页面数据发送与接收(json格式)
jar包(Maven仓库): Spring4 jar包(Maven仓库): 在测试过程中我查看了网上的一些教程,但是那些教程都是在Spring3环境下的,Spring3和Spring4解析json需要 ...
- struts2 + jquery + json 简单的前后台信息交互
ajax 是一种客户端与服务器端异步请求的交互技术.相比同步请求,大大提高了信息交互的速度和效率.是当下非常实用和流行的技术. 这里简单的说明 struts2 + jquery + json 下的 信 ...
随机推荐
- 【入门必看】不理解「对象」？很可能有致命bug：简单的Python例子告诉你
简介:越来越多的人要在学习工作中用到『编程』这个工具了,其中很大一部分人用的是Python.大部分人只是做做简单的科研计算.绘图.办公自动化或者爬虫,但-- 这就不需要理解「指针与面向对象」了吗? 在 ...
- C# Attribute特性 泛型<T> 方法的out ref this(扩展方法) Equals与==
out ref out和ref的使用场景其实不一样.out适合在方法内返回一个额外的结果参数,而ref适合直接改变一个在方法外面的值,方法改变外部就改变,无需重新定义接住返回值再使用. out可以在方 ...
- CentOS7 实战源码部署apache网站服务器
简介:实战演练apache网站服务器的搭建 Apache简介: Apache软件基金会的一个开源免费的网页服务器,也是目前世界上使用最广泛的一种web server , apache最出名的是它跨平台 ...
- 【Azure App Service】C#下制作的网站，所有网页本地测试运行无误，发布至Azure之后，包含CHART（图表）的网页打开报错，错误消息为 Runtime Error： Server Error in '/' Application
问题描述 C#下制作的网站,所有网页本地测试运行无误,发布至Azure之后,包含CHART(图表)的网页打开报错,错误消息为 Runtime Error: Server Error in '/' Ap ...
- JAVA读取EXCEL_自动生成实体类
代码实现PropertyAnno.java import java.lang.annotation.ElementType; import java.lang.annotation.Retention ...
- 转【深入理解SQL的四种连接-左外连接、右外连接、内连接、全连接】
转自:https://www.jb51.net/article/39432.htm 1.内联接(典型的联接运算,使用像 = 或 <> 之类的比较运算符).包括相等联接和自然联接. ...
- MongoDb学习（四）--Repository----语法关键字
表7.查询方法支持的关键字 关键词 样品 逻辑结果 After findByBirthdateAfter(Date date) {"birthdate" : {"$gt& ...
- logback日志对象要素
<logger>节点 分两种 1.是普通日志对象 logger分为2种,一种是普通日志对象,另一种是根日志对象.对于大部分应用来说,只设置根日志对象即可. 在java日志系统中,无论是lo ...
- Linux 路由 静态路由
Linux 路由 静态路由 目录 Linux 路由 静态路由 一.临时生效,使用命令route A.添加到主机的路由 B.添加到网络的路由 C.添加默认路由 D.删除路由 E.查看所有路由信息 二.临 ...
- Node项目模板管理脚手架ptm-cli开发
目录 一.ptm-cli 使用说明 1.特点 2.安装 3.使用 1)基础帮助命令 2)添加模板/项目 3)编辑模板/项目 4)查看模板/项目 5)删除模板/项目 6)基于模板新建/初始化项目 二 p ...