将 jQuery 选择克隆到变量中并将其插入回 DOM答案

【问题标题】：Clone jQuery selection into variable and insert it back into DOM将 jQuery 选择克隆到变量中并将其插入回 DOM
【发布时间】：2018-08-21 17:58:39
【问题描述】：

我做错了什么，是不是可以将元素克隆到变量中并从那里插入回 DOM 中？

var clonedElements = $('.source .item').clone();
$('.target .item').each(function(index) {
    $(this).after(clonedElements[0]);
});

通过始终在目标中存在的元素之后插入第一个元素来减少克隆数组。

【问题讨论】：

对我来说很好：jsfiddle.net/yg76uhnk
抱歉，刚刚编辑了我的示例...
两件事。 #1) $('.source .item').clone; 缺少 () 来调用克隆。 #2) 当您将现有的 dom 元素附加到另一个父级时，它会将它们从原来的位置移动，因为元素只能存在于单个父级下。如果您想将它们放在多个位置，则每次出现都需要一个克隆。
抱歉，遗漏了括号，已编辑。是的，从数组中插入“第一个”（[0]）意味着在每次插入之后，可以通过[0]访问下一个元素......但是，为什么第二个例子不起作用？

标签： jquery dom clone

【解决方案1】：

你可以给after()克隆的元素，它会放在元素之后。如果您要在多个元素之后插入元素，它将执行额外的克隆作为after() 逻辑的一部分。

$('.target .item').after($('.source .item').clone());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="source" style="display:none;">
  <div class="item">New Source</div>
</div>

<div class="target">
  <div class="item">Original Target</div>
  <div class="item">Original Target</div>
  <div class="item">Original Target</div>
  <div class="item">Original Target</div>
  <div class="item">Original Target</div>
</div>

【讨论】：

【解决方案2】：

我弄错了：

$(this).after(clonedElements[0]);

...不会从数组中删除元素，并且下一个元素不会再次获得可被 [0] 访问的新索引，就像它们在作用于 jQuery 对象时一样：

$(this).after($('.source .item')[0]);

所以解决方案是将克隆转换为数组并在它们上移动：

var items = $(".source .item").clone().toArray();
$('.target .item').each(function(index) {
    $(this).after(items.shift());                
});

示例：https://jsfiddle.net/9q6brnkv/

【讨论】：