JQuery 克隆 div 并插入到最后一个下面

Question

有谁知道为什么克隆的 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

谢谢

Answer 1

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

要解决此问题，请改用 class，然后根据需要使用 :first 和 :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 对象。