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 下的 信 ...
随机推荐
- python之列表操作的几个函数
Python中的列表是可变的,这是它却别于元组和字符串最重要的特点,元组和字符串的元素不可修改.列举一些常用的列表操作的函数和方法. 1,list.append(x),将x追加到列表list末尾: 1 ...
- Java基础-方法的重写和重载
重载(Overload)和重写(Override) 重载是在同一个类里面,方法名字相同,而参数不同.返回类型可以相同也可以不同.每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表. 重写 ...
- asp.net webapi关闭https配置
将s去掉就行
- springboot 中yml配置
springboot 中各种配置项纪录 1. @Value 最早获取配置文件中的配置的时候,使用的就是这个注解,SpEL表达式语言. // 使用起来很简单 @Value("${config. ...
- git 清除本地git commit的内容
由于我经常git add . , 然后再git commit -m "文字说明",这样有时候代码嵌套再另一个项目里面,就会把外面的项目一起提交了,导致提交的代码不是我想要的.小菜鸟 ...
- 读取平台管理员xlsx文件
package com.cn.peitest.excel; import java.io.File; import java.io.FileInputStream; import java.io.Fi ...
- 将两个ListMap中同下标的map去重合并
public static void main(String[] args) { Map<String,Object> oneMap = new HashMap<>(); on ...
- JavaDailyReports10_05
1 package varycode; 2 3 import java.util.ArrayList; 4 import java.util.Random; 5 6 public class Vary ...
- 零基础学习qt4 第七章的第一个例子
#include <QtGui> #include "extensionDlg.h" ExtensionDlg::ExtensionDlg(QWidget *paren ...
- python实现贴吧顶贴机器人
前言------百度贴吧流量如何?全球最大的中文社区,虽然比不上阿里,腾讯! 此文章仅供交流学习.建议机器人用小号操作,切勿用作商业用途! 测试版本:python 3.7 64位火狐浏览器firefo ...