Question

我正在尝试通过同一个数组运行两个for循环来克隆一堆项目，一个向前转发另一个，但它似乎只输出第二个数组。尝试这样做有问题吗？这是我的设置：

我首先将我想要的元素推入数组。

var cloneArr = new Array();
$('.element').each(function(){
  var clone = $(this).clone();
  cloneArr.push(clone);
});

然后我运行两个for循环来追加并在原始项目前面添加每个项目。

for (i = 0; i < elementLength; i++) {
   $('.element-parent').append(cloneArr[i]);
}
for (i = elementLength - 1; i >= 0; i--) {
   $('.element-parent').prepend(cloneArr[i]);
}

我遇到的问题是他们每个人都是自己工作但不会一起工作。它只会添加第二个放置的循环。我尝试创建两个不同的数组，并在第一个数组完成后调用第二个数组，但得到相同的结果。

有谁知道我怎么能做到这一点或我做错了什么？

Answer 1

你要追加并添加相同的元素。你应该克隆两次。

for (i = 0; i < elementLength; i++) {
  $('.element-parent').append(cloneArr[i]);
}
for (i = elementLength - 1; i >= 0; i--) {
  $('.element-parent').prepend(cloneArr[i].clone()); //<-- here you are!!
}

Answer 2

您尝试将相同的元素放入节点两次（cloneArr[i]是对节点的引用）。由于节点已存在于父节点中，因此它有效地移动到节点位于父节点下的位置。您通过两个不同的循环运行它并不重要，您仍然引用相同的节点。

var $clone = $('p').clone();
$clone.text('Clone');
$('div').append($clone);
$('div').prepend($clone);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<p>Original</p>

Answer 3

var appendArr = new Array();
var prependArr = new Array();
$('.element').each(function(){
  appendArr.push($(this).clone());
  prependArr.push($(this).clone());
});

var elementLength = appendArr.length;
for (i = 0; i < elementLength; i++) {
   $('.element-parent').append(appendArr[i]);
}
for (i = elementLength - 1; i >= 0; i--) {
   $('.element-parent').prepend(prependArr[i]);
}

您需要克隆该元素两次。您当前正在创建一个克隆，然后附加它，然后通过前置移动它。这里有一些代码与您的代码相似，here's a jsfiddle可以看到它的实际效果。

通过同一个数组运行两个for循环

3 个答案: