Question

我有一个div，我想复制它。我的意思是我希望同一个div重复一次。我已经使用过这样的代码了。

$("#btnAddRules").click(function(){
    $(".div1_section").clone().insertAfter($(".div1_section"));
});

但是，当一次又一次点击该按钮时，它正在添加多个DIV，我希望在最后一个div之后只插入一个div。

<div class="col-md-8">
  <div class="row div1_section">
    <div class="col-md-6">
      <label>hey hey hey</label>
      <select class="form-control">
        <option>klklk</option>
        <option>huhuuh</option>
      </select>
      <br/>
    </div>
    <div class="col-md-6">
      <label>abc</label>
      <div class="input-group-currency">
        <span class="currency">pk</span>
        <input type="text" class="form-control input-currency" name="start" value="20'000" style="float:left">
      </div>
    </div>
  </div>

希望很快收到你的来信。

由于

Answer 1

使用last()仅定位集合中的最后一个元素：

$("#btnAddRules").click(function() {
  $(".div1_section").last().clone().insertAfter($(".div1_section").last());
});

.div1_section {
  line-height:50px;
  margin:20px 0;
  padding:0 20px;
  background:tomato;
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAddRules">Add More Rules</button>
<div class="div1_section">Original</div>

Answer 2

首次点击后删除事件监听器，如下所示：

var callback = function () {
    document.getElementById('btnAddRules').removeEventListener('click', callback);
    $(".div1_section").clone().insertAfter($(".div1_section"));
}   

document.getElementById('btnAddRules').addEventListener('click', callback);

很抱歉使用vanilla JS和你的jquery，我更习惯写vanilla JS。

Answer 3

使用last()仅定位集合中的最后一个元素，after()将div放在div之后：

$("#btnAddRules").click(function(){
   $(".div1_section").last().after($(".div1_section").last().clone());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1_section" >
Hi this is testing
</div>
<button type="button" id="btnAddRules">
Add DIV
</button>

避免多次克隆或重复div按钮单击并插入相同的最后一个克隆div一次

3 个答案: