我得到多个 jquery 的克隆项目，在动态循环中使用它的最佳方法是什么？

Question

我想根据用户输入克隆 div。如果用户输入 1，div 被复制 1 次，如果用户输入 2，div 被复制 2 次（当然之前复制的 div 被删除）。

这是我的代码：

$('input').keyup(function() {

var dtotal = parseInt($('input').val());
var $dragcont = $('#parent');
var $dragon = $("#child:not('.cloned')");

for(var i=0;i < dtotal; i++){
$dragon.clone().addClass('cloned').appendTo($dragcont);
}

我已经通过 php（表单操作）实现了这一点，但在这种情况下，我不允许在服务器端 fiddle。帮助。

JSfiddle

Answer 1

首先，要复制的div尽量不要使用id。 Id 应该是唯一的，所以我将其更改为 class。

$('input').keyup(function() {
  var dtotal = parseInt($('input').val());
  var $dragcont = $('#parent');
  var $dragon = $(".child:not('.cloned')");
  
  // If you want to remove previously copied.
  $dragcont.find('.child.cloned').remove();
  
  for(var i=0 ;i <dtotal; i++){
    var $el = $dragon.clone().addClass('cloned');
    $el.appendTo($dragcont);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <p class="child">Clone me</p>
</div>  
  <input type="text"/>

我得到多个 jquery 的克隆项目，在动态循环中使用它的最佳方法是什么？

I'm getting multiple cloned items with jquery, what is best way to use it in a dynamic loop?

jquery

clone