如何在jQuery中定义选择一个元素？

Question

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我点击该按钮两次时，我将有4个输入。虽然我想要2个输入。我知道，这是因为第二次在兄弟姐妹的功能中会匹配两个元素。有什么想法吗？

Answer 1

您只需使用RegistersUsers （仅选择前一个元素，而不是之前的所有元素）而不是.prev()。试试这个：

＆＃13;

＆＃13;

.siblings()

＆＃13;

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

＆＃13;

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

a {
  cursor: pointer;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用.first()函数来获取第一个兄弟元素。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

你的选择器siblings('input')选择div中的所有输入元素，第一次点击为1，第二次为2，等等。

只选择1个克隆输入，您可以保留对原始元素的引用并继续克隆它

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

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

a {
  cursor: pointer;
}

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

Answer 4

尝试$(this).siblings('input:eq(0)')定位第一个输入。要清除输入值（如果存在），请使用.val("")：

$(".add_more_file").on("click", function(){
  var $input = $(this).siblings("input:eq(0)").clone().val("");
  // val("") will clear the value from cloned input if there is any
  $input.insertBefore($(this));
});

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

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

Answer 5

您可以使用'input:first'仅选择第一个输入而不是全部输入，或使用$('<input class="upload" type="file" name="activity_licenses" required />')创建全新的输入元素

    $(".add_more_file").on("click", function(){
      var $input = $('<input  class="upload"  type="file" name="activity_licenses" required />');
          $input.insertBefore($(this));
    })

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

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

Answer 6

使用last()仅克隆最后一个输入。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;