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

Question

我做错了什么，难道不能将元素克隆到一个变量中，然后从那里将其插入回 DOM 中吗？

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

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

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

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

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

Clone jQuery selection into variable and insert it back into DOM

jquery

dom

clone