for循环自动生成多个div

本是古典何须时尚 2022-03-19 10:44 428阅读 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][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;
    }

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

![20190216164357612.png][]

[https_code.jquery.com_jquery-3.3.1.min.js]: https://code.jquery.com/jquery-3.3.1.min.js
[20190216164357612.png]: /images/20220319/fc7fcc4894b842e686be87a6c0c130ef.png