javascript - 克隆循环问题

Question

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

在我在 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>

Answer 1

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

要实现您的要求，请更改选择器，以便在该元素的最后一个实例之后插入它们:

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

另请注意，当您可以在循环中将 i 初始化为 1 时，您的 if (i > 0) 条件是多余的。这是更新后的 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");
  }
});