前端经常会遇到需要数据遍历的盒子，即内容结构相同的Html代码，很多小伙伴都是直接copy，但是很容易出现最后因为复制粘贴的问题，而且如果需要修改，就要把全部删掉，重新复制一遍，很麻烦，所以为了解决这个问题，让我们能够一劳永逸，于是我决定写一个脚本去解决这个问题。如果有小伙伴觉得这个方法可行的，大可以在自己的项目中用起来。真的可以节省很多的时间和精力。
废话不想多说，先直接贴代码，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制代码</title>
<style>
.box{width: 100px;height: 50px;margin:30px;border:1px solid #000;float: left;}
</style>
</head>
<body>
<!-- 栗子一 -->
<div class="copy" data-num="10">11111111</div>
<!-- 栗子二 -->
<div class="box copy" data-num="6">
<h1>我是标题，来打酱油的</h1>
<div class="test">
pink pink pink
</div>
</div>
<script src="../../js/Common/jquery.js"></script>
<script>
$(function(){
$('.copy').each(function(i, item) {
//定义该值是为了省略后面程序的的字符数，并且取copy的第一个
var that = $('.copy').eq(0);
//获得当前copy标签的data-num的值，即要复制的次数
var num = that.attr("data-num");
//获得包括当前节点的html代码
var obj = that.clone().prop("outerHTML");
//将获得到的html代码中的copy字符串去除，以免js出现死循环或错误循环，并存为变量
var newObj = obj.replace('copy', '');
for (i = 1; i < num; i++) {
//在当前节点后插入html代码
that.after(newObj);
}
//移除当前节点的copy的class,避免对页面第二个copy标签的复制影响
that.removeClass('copy');
});
});
</script>
</body>
</html>虽然代码中我加了注释，但我还是要来说一下代码的思路。这段代码其实最重要能想到的一步就是取copy这个类的第一个。有的人会说为什么循环的时候只去修改第一个copy类，我想说，看代码，因为后面每次把代码复制完之后，为了避免死循环和错误，我们都直接把复制内容的copy类去掉了，所以去修改的时候一定去修改copy类的第一个，直到最后一个。当然这段代码还可以改进的地方是可以把data-num去掉，因为患了懒癌病，不想再去改了，当然关键在于这并不影响功能，如果影响功能的情况下一点要改的。
590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
