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

Question

I'm building an App in Phonegap (cordova), and including jquery. For some reason if I add any html elements to append while in $.each , it starts to duplicate all of the entries in my object.

 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> 

If I remove the html, and only do $('#pvPowerList div').append(powa.name); then it lists them out correctly.

What am I donig wrong? why is it acting like that?

Answer 1

On each iteration you are adding a div into #pvPowerList , then you select all the divs again, including the one you just created and append to that one and so on.
Also, .append doesn't support leaving tags open.
The following should fix your issue:

 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>