javascript - jQuery DOM 操作在 forEach 循环中行为异常

Question

我有一个 forEach 循环遍历对象数组。在循环的每次迭代中，我创建一个节点并使用 jQuery 将其附加到 DOM 树。

然而，使用 jQuery 更新这些 DOM 节点的内部文本似乎给我带来了一些问题 - 它在每次迭代中使用相同的值。

我的代码如下:

var specs = [{
  "name": "E5 4603 v2",
  "cores": 4,
  "threads": 8,
  "base": 2.2,
  "turbo": 2.2,
  "price": 1000
}, {
  "name": "E5 4603 v2",
  "cores": 4,
  "threads": 8,
  "base": 2.2,
  "turbo": 2.2,
  "price": 1200
}, {
  "name": "E5 4603 v2",
  "cores": 4,
  "threads": 8,
  "base": 2.2,
  "turbo": 2.2,
  "price": 1500
}];

specs.forEach(function(elem) {
  var text = "\
	<div class='product'>\
	    <span class='name'></span>\
	    <span class='price'></span>\
	</div>";
  var append = $("#processor").append(text);
  $(append).find(".price").text(elem.price);            //Pretty sure my problem lies here
  $("#middle").append("<div>" + elem.price + "</div>"); //Can't figure it out though.
});

#left,
#middle,
#right {
  display: inline-block;
  margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
  <div id="processor" class="prodcat">
    <div class="main"></div>
  </div>
  <div id="harddrive" class="prodcat">
    <div class="main"></div>
  </div>
</div>
<div id="middle"></div>
<div id="right">Left column is incorrect (should look like right column)</div>

我确信这个问题有一个非常简单的解决方案，但我无法看到它。任何帮助将不胜感激。

Answer 1

您正在使用 .price 类为所有元素设置价格，因此所有这些元素都将使用最后一个价格作为值，即 1500