Question

我做了一个简单的文件上传，在拖放ID上像要为foreach克隆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");

还要注意，当您可以在循环中仅将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");
  }
});

克隆循环问题

1 个答案: