Dynamically Generating Divs with jQuery based on variable number

Question

Alright I'm a little lost.

I've a page that pulls a value out of a database which is then being loaded into a variable, ticketNum. Basically I just need to generate the same div/content every time based on this number. I'm at a loss as it how to do it.

If the ticketNum is 10, I need 10 divs, if it's 3, I need 3 and so on.

$(document).ready(function(){
 var ticketNum = 10;

 if (ticketNum > 0) {

   } else {

   }

});

Why should they try to do it via a server side language? Just simple dom manipulation. — Loktar
– Loktar, Commented Feb 11, 2011 at 19:13

Loktar · Accepted Answer · 2011-02-11 19:05:57Z

3

http://jsfiddle.net/5KHaq/

$(document).ready(function(){ 
    var ticketNum = 10;

    for(var i = 0; i<ticketNum;i++){
        $('<div></div>').appendTo('#container').text("Div number " + i);   
    }
});

Is that what you are looking for?

answered Feb 11, 2011 at 19:05

Loktar

35.3k7 gold badges96 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Thomas Over a year ago

Our answers are, essentially, the same: so +1 =)

Loktar Over a year ago

heh yeah, we just happen to hit submit at roughly the same time.

David Thomas · Accepted Answer · 2011-02-11 19:15:23Z

2

You can use a for loop:

if (ticketNum > 0) {
    for (i=0; i < ticketNum; i++) {
        $('<div id="addedDiv_num' + i + '" />').text('Div number:  ' + i).appendTo('#containerElement');
    }
}

JS FIddle demo.

edited Feb 11, 2011 at 19:15

answered Feb 11, 2011 at 19:06

David Thomas

254k53 gold badges382 silver badges421 bronze badges

2 Comments

OD_WebDev Over a year ago

Awesome thanks. I know this was probably dead simple for ya, but as designer dabbling in dev it's a huge help.

David Thomas Over a year ago

@OD_WebDev: no problem at all (we all started learning something at least once...) =)

Collectives™ on Stack Overflow

Dynamically Generating Divs with jQuery based on variable number

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related