Question

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

请参阅示例：

＆＃13;

document.getElementById("add-div").onclick = function() {
  $('#to-be-cloned').clone().insertAfter($('#to-be-cloned:last'));
}

＆＃13;

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

＆＃13;

示例：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对象。

JQuery clone div并在最后一个下面插入

1 个答案: