ajax双循环渲染

最新推荐文章于 2022-09-19 21:13:35 发布

冰淇淋ly

最新推荐文章于 2022-09-19 21:13:35 发布

阅读量180

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/qq_39232387/article/details/115005027

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span {
				margin-right: 10px;
			}
		</style>
	</head>
	<body>
		<div class="bigBox">
			<!-- <div class="bigItem">
				<p>父亲：张三</p>
				<div class="smallBox">
					<div class="smallItem"><span>张大娃</span><span>11</span></div>
					<div class="smallItem"><span>张二娃</span><span>11</span></div>
					
				</div>
			</div>
			<div class="bigItem">
				<p>父亲：李四</p>
				<div class="smallBox">
					<div class="smallItem"><span>李大娃</span><span>11</span></div>
					<div class="smallItem"><span>李二娃</span><span>11</span></div>
				</div>
			</div> -->

		</div>
	</body>
	<script src="jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var data = [{
				"father": "张三",
				"child": [{
						"name": "张大娃",
						"age": 1
					},
					{
						"name": "张二娃",
						"age": 6
					},
					{
						"name": "张三娃",
						"age": 41
					}
				]
			},
			{
				"father": "李四",
				"child": [{
						"name": "李大娃",
						"age": 11
					},
					{
						"name": "李二娃",
						"age": 91
					}
				]
			},
			{
				"father": "王五",
				"child": [{
						"name": "王大娃",
						"age": 77
					},
					{
						"name": "王二娃",
						"age": 9
					}
				]
			}
		]
		var DOM = '';
		for (var i = 0; i < data.length; i++) {
			DOM +=`
			    <div class="bigItem">
				    <p>父亲：${data[i].father}</p>
				    <div class="smallBox">
			`
			var childList = data[i].child
			for (var j = 0; j < childList.length; j++) {
				DOM +=`
				<div class="smallItem">
				    <span>${childList[j].name}</span>
					<span>${childList[j].age}</span>
				</div>
				`
			}
			DOM +=`
			    </div>
			</div>
			`
		}
        $(".bigBox").html(DOM);
	</script>
</html>

效果
在这里插入图片描述

冰淇淋ly

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax双循环渲染

静态网页结构<body> <div class="bigBox"> <div class="bigItem"> <p>父亲：张三</p> <div class="smallBox"> <div class="smallItem"><span>张大娃</span><span>11</span></div> <div class
复制链接

扫一扫

专栏目录