方法＃1（失败）：

Question

我试图将我的实际问题简化为一段非常简单的代码。我实际上有解决方案，但我想了解为什么它的工作原理。

我有一个里面有几个值的数组。
我有一个父容器。
我设置了一个全局const变量，其值为$('<div class="each-container"></div>')，我想将其用作每个数组值的每个单独容器。
使用Array.forEach，我循环遍历数组中的每个值，并且在每次迭代时，我想为每个值创建一个div容器，然后将其输入{{1} }容器。

方法＃1（失败）：

.parent

但是，如果我只是删除 const变量，并将其替换为我最初设置常量变量的相同内容（即。//code that DOES NOT WORK const eachContainer = $('<div class="each-container"></div>'); testArr = ['This', 'is', 'just', 'a', 'test']; //grab each array value, and wrap it in a div container, then append to parent testArr.forEach(function(element) { //each container should have within it a value from the array const completeElement = eachContainer.text(element); //select parent element and on each iteration, add the container with it's value to the parent container $('.parent').append(completeElement); })），它可以正常工作。

方法＃2（成功）：

$('<div class="each-container"></div>')

那么为什么方法＃1不起作用？以下是我认为会发生的事情：

在循环的每次迭代期间，引擎将使用词法范围查找//this code WORKS //instead of assigning the container element to a const, wrote it directly into the loop testArr = ['This', 'is', 'just', 'a', 'test']; testArr.forEach(function(element) { const completeElement = $('<div class=each-container></div>').text(element); $('.parent').append(completeElement); })，在上面找到它，然后将数组值插入容器，然后将其附加到父容器。

这应该发生5次，但它只发生一次，并且只发生在最后一次迭代。

假设

在我看来，有些东西不断覆盖循环的每次迭代，而不是向我显示每个单独的值...... ??

Answer 1

它覆盖每次迭代，因为你在循环外部使用相同的变量（因为你没有改变它），而在第二次迭代时你在每次迭代时都创建了一个新的div。

如果你真的想让第一段代码工作，你可以简单地克隆const元素：

const eachContainer = $('<div class="each-container"></div>');
testArr = ['This', 'is', 'just', 'a', 'test'];

//grab each array value, and wrap it in a div container, then append to parent
testArr.forEach(function(element) {

//each container should have within it a value from the array
  const completeElement = eachContainer.clone().text(element);

//select parent element and on each iteration, add the container with it's value to the parent container  
  $('.parent').append(completeElement);
})

甚至每次循环发生时都会创建div：

testArr.forEach(function(element) {

//each container should have within it a value from the array
  eachContainer = $('<div class="each-container"></div>');
  const completeElement = eachContainer.text(element);

//select parent element and on each iteration, add the container with it's value to the parent container  
  $('.parent').append(completeElement);
})

Answer 2

问题在于，在方法＃1中，您在循环的每次迭代中重复使用相同的节点并更改其文本，因此每次都使用不同的文本重新出现相同的节点。

const eachContainer = $('<div class="each-container"></div>');
testArr = ['This', 'is', 'just', 'a', 'test'];

testArr.forEach(function(element) {

  const completeElement = eachContainer.text(element);
	
  $('.parent').append( completeElement === eachContainer );
})

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

设置全局变量会阻止简单程序正常工作吗？

方法＃1（失败）：

方法＃2（成功）：

假设

2 个答案: