时间戳

首页 > 解决方案 > 克隆循环问题

javascript - 克隆循环问题

问题描述

我做了一个简单的文件上传，在拖放 id 时喜欢克隆 4 个输入字段（文件名、替代文本）foreach，我尝试了不同的方法。但问题是它被克隆的频率比它应该的要多得多。

在我关于 Jsfiddle 的示例中，我用 5 个文件进行了模拟，但它被克隆了约 15 次而不是 4 次。

$('button').click(function(){
  var  lol = 5;

  for (var i = 0; i < lol; i++) {			
    if(i > 0){
     var $newCustomer = $('#clonemulti').clone();
      $newCustomer.removeAttr('id');

      $newCustomer.insertAfter( ".clonemulti" );	 
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clonemulti" id="clonemulti">	  						
    <input type="text"  class="filenameauto" name="filename[]" placeholder="" title="Dateiname" maxlength="20" required>

      <input type="text" placeholder="Alt. Text (de)" name="alttext[]" maxlength="50" required>
      <input type="text" placeholder="Alt. Text (it)" name="alttext[]" maxlength="50" required>
      <input type="text" placeholder="Alt. Text (en)" name="alttext[]" maxlength="50" required>

    <br/><br/>
</div>	
<button>clone</button>

标签： javascriptjquery

解决方案

问题是因为在每个现有元素.insertAfter(".clonemulti")之后添加新行。.clonemulti

为了实现您需要更改选择器，以便将它们插入到该元素的最后一个实例之后：

$newCustomer.insertAfter(".clonemulti:last");

另请注意，if (i > 0)当您可以在循环中初始化i时，您的条件是多余的。1这是更新的 JS 的完整示例：

$('button').click(function() {
  var lol = 5;

  for (var i = 1; i < lol; i++) {
    var $newCustomer = $('#clonemulti').clone();
    $newCustomer.removeAttr('id');
    $newCustomer.insertAfter(".clonemulti:last");
  }
});

推荐阅读