for循环自动生成多个div

最新推荐文章于 2022-05-11 14:06:41 发布

MENG-

最新推荐文章于 2022-05-11 14:06:41 发布

阅读量2.3w

点赞数 12

分类专栏：前端文章标签： JS

本文链接：https://blog.csdn.net/qq_42320048/article/details/87457025

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在码页面时，我们会经常遇到要重复生成布局一样的div的情况，很烦人。以下方法可仅用几行代码轻松解决此问题，了解一下。<script>标签里为具体方法。

HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>朋友圈</title>
<link href="quan2.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="top">
<img class="tu1" src="tu1.jpg">
<p>梦里梦到醒不来的梦</p>
<img class="tu2" src="tu1.jpg">
</div>
<div class="meg">
<div class="meg1">
<img class="photo1" src="tu1.jpg">
<p class="name">Dream</p>
<p class="ff">晴天真好</p>
<img class="photo2" src="tu1.jpg">
<p class="tt">25分钟前</p>
<img class="photo3" src="dian.png">
<hr />
</div>
</div>
<script>
	
for (var i=1;i<11;i++){
    a='<div class="meg1">';
    a += '<img class="photo1" src="tu1.jpg">';
    a += '<p class="name">Dream</p>';
	a+='<p class="ff">晴天真好</p>';
	a+='<img class="photo2" src="tu1.jpg">';
	a+='<p class="tt">25分钟前</p>';
	a+='<img class="photo3" src="dian.png">';
	a+='<hr />';
	a+='</div>';
   $(".meg").append(a);
  }
  
</script>


</body>
</html>

将重复的div中的语句连接起来，用for循环重复生成，解释一下 $(".meg").append(a);

$是选中将.meg块，对于$可以解释为：$("#id")=document.getElementById("id")；标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')。再用append() 方法在被选元素的结尾插入指定内容，将a的内容放到.meg中，由此可重复生成div；

注意：如果你要用$(“#id”)，你得引入JavaScript框架，加上这个标签就可以了<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

CSS代码：

.top img.tu2{
	position:relative;left:639px;top:-250px;
	width:250px;
	height:250px;
	cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.top img.tu1{
	width:1000px;
	height:500px;
}
.top p{
	position:relative;left:190px;top:-125px;
	font-size:35px;
	color:white;
}
.meg1 img.photo1{
	position:relative;left:26px;top:-343px;
	width:150px;
	height:150px;
	cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.meg1 p.name{
	position:relative;left:213px;top:-517px;
	font-size:38px;
	color:#333366;
	font-weight:bold;
}
.meg1 p.ff{
	position:relative;left:213px;top:-507px;
	font-size:35px;
	color:#111;
}
.meg1 img.photo2{
	position:relative;left:190px;top:-507px;
	width:500px;
	height:500px;
}
.meg p.tt{
    position:relative;left:181px;top:-507px;
}
.meg1 img.photo3{
	position:relative;left:820px;top:-605px;
	width:80px;
	height:60px;
}
.meg1 hr{
	position:relative;left:-10px;top:-504px;
	 border-bottom: 1px solid #000000;
	width: 1000px;
}

最后看一下效果图，这是我做的一个简单的朋友圈，新手，请多多指教。

MENG-

关注

12
点赞
踩
48

收藏

觉得还不错? 一键收藏
1
评论
for循环自动生成多个div

在码页面时，我们会经常遇到要重复生成布局一样的div的情况，很烦人。以下方法可仅用几行代码轻松解决此问题，了解一下。&lt;script&gt;标签里为具体方法。HTML代码：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;朋友圈&lt;/ti
复制链接

扫一扫