时间戳

首页 > 解决方案 > JQuery 克隆 div 并插入到最后一个下方

jquery - JQuery 克隆 div 并插入到最后一个下方

问题描述

有谁知道为什么总是在第一个 div 之后插入克隆的 div，而不是在最后添加（克隆）的 div 之后？我也尝试了许多简单的 javascript 变体，但没有成功。

请看示例：

document.getElementById("add-div").onclick = function() {
  $('#to-be-cloned').clone().insertAfter($('#to-be-cloned:last'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="to-be-cloned">
  <select>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
</div>
<button id="add-div">Add div</button>

示例：https ://codepen.io/azej/pen/YLMdKG

谢谢

标签： jquery

解决方案

问题是因为您正在克隆具有 的元素id，这会导致idDOM 中的属性重复。选择时，id只会找到第一个元素。

要解决此问题，请改用 a class，然后根据需要使用:firstand:last选择器：

$("#add-div").click(function() {
  $('.to-be-cloned:first').clone().insertAfter('.to-be-cloned:last');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-be-cloned">
  <select>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
</div>
<button id="add-div">Add div</button>

另请注意，您可以提供一个选择器字符串insertAfter()- 您不需要创建另一个完整的 jQuery 对象。

推荐阅读