JQuery using a loop to create new divs

Question

I'm trying to increment through JQuery loop to fill out some HTML code with data from a JSON file. The problem is that I can't seem to figure out how to get write the divs to the HTML below one another, instead the loop increments the data over each other and finally shows the last object in the array on the screen.

Here is my Javascript (tubing.js):

$(document).ready(function() {
crazyFun();
});

function crazyFun() {
for (var i = 0; i < virtualGoods.length; i++) {
        var alpha= $('div.container').clone();
        alpha.find('div.picture').attr('id', virtualGoods[i].picture);
        alpha.find('h2').html(virtualGoods[i].header);
        alpha.find('p').html(virtualGoods[i].text);
        alpha.find('div.notification').attr('id', virtualGoods[i].notification);
        $('div.container').append(alpha);
    }
}
}

"Container" is the HTML Div that I want to repeat on my page with the filled in JSON data.

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello World</title>
        <link rel="stylesheet" type="text/css" href="iphone.css"/>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="virtualgoods.js"></script>
        <script type="text/javascript" src="tubing.js"></script>
    </head>
    <body>
        <div id="mainhead">
            <h1>
            Hello World
            </h1>
        </div>
        <div id="repeater">
                <div class="container">
                    <div class="picture">
                    </div>  
                    <div class="object">
                        <div class="header">
                            <h2></h2>
                        </div>
                        <div class="text">
                            <p>

                            </p>
                        </div>
                    </div>
                    <div class="notification">
                    </div>
                    <div class="neg">
                    </div>
                </div>
        </div>      
    <div id="buffer">
    </div>
    </body>
</html>

can you just clarify which `div` is being cloned and where it is being placed... is the repeater container being cloned and inserted into the buffer container? I'll updated my answer to better fit this when I know exactly what's going on — Alastair Pitts, Jul 20 '10 at 05:08
Sure, Alastair. I need to clone everything inside of the Container class div and I need to create additional Container divs below the previous one (one after the other). The buffer div is just a dummy div ... I just realized that I need to get rid of the Container class attribute from the tag. I also tried to implement your code, and when I ran the HTML file, it slowed down my computer to a halt. — Sachin, Jul 20 '10 at 05:16

Alastair Pitts · Accepted Answer · 2010-07-20T05:41:17.480

3 things jump out at me:

$('container') isn't selecting your div with id="container", it's looking for a <container> element. Try changing this to $('#container').
You are cloning the container (or you will when you do #1) as alpha, but your not do any data work to it. Try doing this pattern: alpha.find('div.picture').attr('id', virtualGoods[i].picture);. Now you are editing the div in the cloned alpha div.
You want to use .after() instead of append. This will insert alpha in the DOM after container, not inside it.

Hope this helps!

EDIT:

Ok, your almost there. just a couple of changes to go.

Change this line $('div.container').append(alpha); to $('#repeater').append(alpha);. This will mean that your appending the new, cloned div after the other one, not inside it.
The next problem is that when you clone, you'll end up with an array of divs as alpha as your selecting on a class (.container). What you need to do is either give the first one a unique id such as id="template" and select on that when you clone or remove the class attribute off your cloned div (use .removeClass().

I also updated my code according to your suggestions in my original post. — Sachin, Jul 20 '10 at 05:18
Thanks!! It worked. Can you explain in more detail why I needed to assign container a unique ID? I'm still foggy on that part. — Sachin, Jul 20 '10 at 05:58
there's a stackoverflow question that deals with id and class that may help: http://stackoverflow.com/questions/970730/css-id-vs-class — pxl, Jul 20 '10 at 10:06

JQuery using a loop to create new divs

1 Answers1