如何克隆一个元素并一次插入多次？

Question

如何克隆元素并将其插入5次？这当然是基本陈述:

$('.col').clone().insertAfter('.col');

这是我需要得到的:

<div class="col" id="original"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>

选择器不需要使用唯一的id,它也可以是类选择器.

我可以重复四次基本陈述,但必须有更优雅的方式吗？

Answer 1

使用循环,如下所示:

$(document).ready(function() {
    var e = $('.col');
    for (var i = 0; i < 5; i++) {
      e.clone().insertAfter(e);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col">clone me...</div>

在循环之前将元素放在一个变量中,否则当你得到几个具有相同id的元素时,你会遇到问题,你的选择器是基于一个id(例如$("#col1")).

如果您的选择器正在使用类,它不会导致与重复ID相同的冲突,但您仍然应该在循环之前将该元素放在变量中,否则您将获得比您想要的更多元素.