如何在jQuery中选择单个元素？解决新增输入框重复创建问题

你的问题我之前也碰到过，核心原因就是用siblings('input')会选中当前所有同级的input元素——第一次点击后页面已经有2个input了，第二次点击时就会一次性克隆两个，最终就出现了4个输入框。要解决这个问题，我们只需要每次只克隆一个目标input元素就行，给你两种简单靠谱的实现方式：

方法一：用prev()选择紧邻的前一个input #

prev()方法只会选中当前元素的前一个同级元素，刚好就是我们需要克隆的那个输入框，代码修改如下：

$(".add_more_file").on("click", function(){ 
  var $input = $(this).prev('input').clone(); 
  $input.insertBefore($(this)); 
})

方法二：用.last()选择最后一个input #

如果你的DOM结构后续可能有调整，或者需要确保克隆的是最新添加的那个输入框，可以用.last()筛选出同级input里的最后一个：

$(".add_more_file").on("click", function(){ 
  var $input = $(this).siblings('input').last().clone(); 
  $input.insertBefore($(this)); 
})

完整可测试代码 #

下面是修改后的完整代码，你可以直接运行验证效果：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w_activity_licenses_inputs">
  <input class="upload" type="file" name="activity_licenses" required />
  <a class="add_more_file" style="display:block">Add more file</a>
</div>

a, input{ 
  display: block; 
  margin-bottom: 5px; 
} 
a{ 
  cursor: pointer; 
}

// 任选上面一种方法即可
$(".add_more_file").on("click", function(){ 
  var $input = $(this).prev('input').clone(); 
  $input.insertBefore($(this)); 
})

这样不管你点击多少次按钮，每次都会只新增一个输入框，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Martin AJ