Question

我正在Phonegap（cordova）中构建一个应用程序，包括jquery。出于某种原因，如果我在append中向$.each添加任何html元素，它将开始复制我对象中的所有条目。

var prof = {"charID":1,"powers":{"125":{"powerID":125,"name":"Cosmic Awareness","rank":100,"id":234,"charID":1},"151":{"powerID":151,"name":"Body Resistance","rank":20,"id":4,"charID":1},"201":{"powerID":201,"name":"Mass Increase","rank":36,"id":2,"charID":1},"202":{"powerID":202,"name":"Phasing","rank":26,"id":10,"charID":1},"237":{"powerID":237,"name":"Gravity Generation","rank":36,"id":3,"charID":1}},"talents":{"2":{"talentID":2,"name":"Thrown Weapons","rank":1,"id":229,"charID":1},"9":{"talentID":9,"name":"Weapons Specialist","rank":1,"id":228,"charID":1},"10":{"talentID":10,"name":"Martial Arts A","rank":1,"id":4,"charID":1},"13":{"talentID":13,"name":"Martial Arts D","rank":1,"id":5,"charID":1},"16":{"talentID":16,"name":"Thrown Objects","rank":1,"id":230,"charID":1},"29":{"talentID":29,"name":"Detective/Espionage","rank":1,"id":2,"charID":1},"36":{"talentID":36,"name":"Computers","rank":1,"id":1,"charID":1},"39":{"talentID":39,"name":"Sleight of Hand","rank":1,"id":250,"charID":1},"50":{"talentID":50,"name":"Leadership","rank":1,"id":3,"charID":1},"51":{"talentID":51,"name":"Zero-G Training","rank":1,"id":6,"charID":1},"52":{"talentID":52,"name":"Zero-G Combat","rank":1,"id":7,"charID":1}}};

$.each(prof.powers, function(id, powa) {
  $('#pvPowerList div').append('<div class="row">');
  $('#pvPowerList div').append(powa.name); 
  $('#pvPowerList div').append('</div>');   
});

.row {display:block; clear:both;}

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

如果我删除html，只执行$('#pvPowerList div').append(powa.name);，那么它会正确列出它们。

我做错了什么？为什么会这样呢？

Answer 1

在每次迭代中，您要在div中添加#pvPowerList，然后再次选择所有div，包括您刚刚创建的div并附加到那个div，依此类推。
此外，.append不支持打开标签。
以下内容应解决您的问题：

var prof = {"charID":1,"powers":{"125":{"powerID":125,"name":"Cosmic Awareness","rank":100,"id":234,"charID":1},"151":{"powerID":151,"name":"Body Resistance","rank":20,"id":4,"charID":1},"201":{"powerID":201,"name":"Mass Increase","rank":36,"id":2,"charID":1},"202":{"powerID":202,"name":"Phasing","rank":26,"id":10,"charID":1},"237":{"powerID":237,"name":"Gravity Generation","rank":36,"id":3,"charID":1}},"talents":{"2":{"talentID":2,"name":"Thrown Weapons","rank":1,"id":229,"charID":1},"9":{"talentID":9,"name":"Weapons Specialist","rank":1,"id":228,"charID":1},"10":{"talentID":10,"name":"Martial Arts A","rank":1,"id":4,"charID":1},"13":{"talentID":13,"name":"Martial Arts D","rank":1,"id":5,"charID":1},"16":{"talentID":16,"name":"Thrown Objects","rank":1,"id":230,"charID":1},"29":{"talentID":29,"name":"Detective/Espionage","rank":1,"id":2,"charID":1},"36":{"talentID":36,"name":"Computers","rank":1,"id":1,"charID":1},"39":{"talentID":39,"name":"Sleight of Hand","rank":1,"id":250,"charID":1},"50":{"talentID":50,"name":"Leadership","rank":1,"id":3,"charID":1},"51":{"talentID":51,"name":"Zero-G Training","rank":1,"id":6,"charID":1},"52":{"talentID":52,"name":"Zero-G Combat","rank":1,"id":7,"charID":1}}};

var target = $('#pvPowerList > div');
$.each(prof.powers, function(id, powa) {
  target.append('<div class="row">' + powa.name + '</div>');
});

.row {display:block; clear:both;}

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

$ .each多次重复相同的条目

1 个答案: