JQuery using a loop to create new divs -


I am trying to increase the amount of HTML code from the JSON file with data via the JQuery loop. The problem is that I can not understand how to write divs under HTML to each other, instead the loop increases the data on each other and finally shows the last object in the array on the screen.

This is my Javascript (tubing.js):

  $ (document) .ready (function () {mad fun ();}); Function madfun (for (var i = 0; i & lt; virtualGoods.length; i ++) {var alpha = $ ('div.container'). Clone (); alpha.find ('div.picture '' Etter ('id', verchuaglugs [i].); Alpha.find ('h2') HTML (virtualGoods [i] .header); Alpha.find ('P') HTML (virtualGoods [i ] .text); alpha.find ('div.notification'). Etr ('id', verchualgoods [i] notification); $ ('div.container') (alpha) attached; "container" is html div Which I would like to repeat with the filing of JSN data on my page.  

Here's my HTML:

    gt; top & gt; & lt; title & gt; Hello world & lt; / title & Gt; & lt; link rel = "stylesheet" type = "text / css" href = "iphone.css" / & gt; script type = "text / javascript" src = "jquery.js" & gt; ; & Lt; / script & gt; script type = "text / javascript" src = "virtualgoods.js" & gt; & lt; / script & gt; & lt; script type = "text / javascript" src = "Tubing.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "mainhead" & gt; & Lt; H1 & gt; Hello World & lt; / H1> & Lt; / Div & gt; & Lt; Div id = "repeater" & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "picture" & gt; & Lt; / Div & gt; & Lt; Div class = "object" & gt; & Lt; Div class = "header" & gt; & Lt; H2 & gt; & Lt; / H2 & gt; & Lt; / Div & gt; & Lt; Div class = "text" & gt; & Lt; P & gt; & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "notification" & gt; & Lt; / Div & gt; & Lt; Div class = "neg" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "buffer" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt; 3 things go out on me:  
  1. $ ('container') your div to id = " Container "with , this is a & lt; Container & gt; Trying to convert element to $ ('# container')

  2. You are cloning the container (or when you # 1), alpha , but none of your data works for it. Try doing this pattern: alpha.find ('div.picture'). Attr ('id', vertealogagus [i]. Diagram); . Now you are editing div in clone alpha divis.
  3. You want to use . Instead of app () , it will not insert the alpha inside the container inside it.

Hope it helps!

EDIT:

OK, you are almost there. Just to go in a few shifts

  1. Change this line to $ ('div.container'). Append (alpha); Attached (alpha) from $ ('#. Repeater') to ; . This would mean that you will not attach the second, the cloned divis after each other, not inside it.
  2. The next problem is that when you clone, you have to select your alpha on a square ( .container ) with an array of div what you need to do Either give a unique id like id = "template" first and select it when you remove the clone or class attribute in the clone compartment (use RemoveClass () .

Comments