jQuery DOM maniuplation在forEach循环中奇怪地行动

Question

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

然而，似乎使用jQuery更新这些DOM节点的内部文本会导致一些问题 - 它在每次迭代时都使用相同的值。

我的代码如下：

＆＃13;

＆＃13;

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.
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我确定这个问题有一个非常简单的解决方案，但我很难看到它。任何帮助都将非常感激。

Answer 1

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

Answer 2

在迭代中，您将继续覆盖所有.price跨度。始终写信至:last

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) {
  console.log(elem.price);
  var text = "\
	<div class='product'>\
	    <span class='name'></span>\
	    <span class='price'></span>\
	</div>";
  var append = $("#processor").append(text);
  $(append).find(".price:last").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 3

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) {
  $("#processor").append("<div class='product'><span class='price'>" + elem.price + "</span></div>");
  $("#middle").append("<div class='product'><span class='price'>" + elem.price + "</span></div>"); 
});

试试这个