循环自动生成N个div的实现

木子啦啦啦啦

于 2019-02-22 11:01:36 发布

阅读量8.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： WEB前端

本文链接：https://blog.youkuaiyun.com/qq_42685333/article/details/87874385

WEB前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript循环生成自定义数量div元素的方法。通过清空并重新填充外部div，可以动态创建指定数量的子div，每个div具有统一的样式设定。此技术适用于需要动态调整页面布局的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文详解：循环自动生成N个div的实现
 原文链接： http://licocom.com/archives/1128
生成自定义N个div的循环生成实现方式。

html部分：需要先创建一个外部最大div。
&lt;div id="box" style="width: 100%;height: 100%"&gt;
//创建最外部的div——用来包含生成的div
&lt;/div&gt;
&nbsp;
js部分响应函数：
function timeCycleColumnar(data) {
    $("#box").empty();//清空原始div
    var divStr = "", divStrId = "";
    for (var i = 0; i &lt; data.length; i++) {
        divStrId = '"timeDays' + i;//生成id策略
        divStr += '&lt;div id=' + divStrId + '"' + ' class="divSetingStr"&gt;&lt;/div&gt;';//拼接div
    }
    $("#box").append(divStr);//将生成div添加内box的div内
}
&nbsp;
/*生成div样式*/：&nbsp;
.divSetingStr {
    width: 80%;
    height: 300px;
    margin-left: 10%;
    margin-top: 30px;
}