在同一个数组中运行两个 for 循环答案

【问题标题】：Running two for loops through the same array在同一个数组中运行两个 for 循环
【发布时间】：2016-01-15 11:08:07
【问题描述】：

我试图通过同一个数组运行两个 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]);
}

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

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

【问题讨论】：

您正在追加和前置相同的元素。你应该克隆它两次。
正如我所说，我尝试运行两个不同的克隆数组并获得相同的结果。
@user2339729，你做了两个不同的数组，但是你把同一个变量放进去了吗？您需要运行两次$(this).clone(); 来创建两个不同的克隆。

标签： javascript jquery arrays for-loop clone

【解决方案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!!
}

【讨论】：

这就是我想要的。我想这将是我忽略的一些简单的事情。完美运行，谢谢！

【解决方案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>

【讨论】：

你说出了什么问题，但你没有提供答案，你只是提供了另一个不起作用的例子。
我解释了为什么它没有产生预期的结果。只需多想一下，每次插入节点时都需要克隆节点。

【解决方案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 可以查看它的运行情况。

【讨论】：