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

2 个答案: