Create divs using a for loop in jQuery and assign IDs to each div

Question

I am currently creating divs using a for loop.

The problem is when I try to assign a unique id to every div element that is being created within the for loop.

I am getting closer but at the moment the count starts at 36 instead of being 1.

Thanks so much for you help!

Here is my html:

<!DOCTYPE html>
<html>
<head>
<title>Intro Webpage!</title>

<meta charset="UTF-8" /> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>

Now, this is my script.js:

for(i = 0; i < 35; i++) {
$(document).ready(function(){
    $('body').append('<div id="div'+ (i++) +'" />');
});
}

Also, my css:

div {
width: 167px;
height: 167px;
border-radius: 10px;
background-color: #ff0000;
display: inline-block;
margin-left: 5px;
}

Adil · Accepted Answer · 2012-12-11 05:17:10Z

5

You need to put loop in side document.ready instead of putting document.ready in loop also you may not need to increament i within loop body as it is increamented in loop signature. You can read more about document.ready here

$(document).ready(function(){
  for(i = 0; i < 35; i++) {
    $('body').append('<div id="div'+ i +'" />');
  }
});

answered Dec 11, 2012 at 5:17

Adil

148k25 gold badges217 silver badges207 bronze badges

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

Comments

Sang Suantak · Accepted Answer · 2012-12-11 05:23:44Z

3

All the provided answers will do the job but if you want to make it faster, you can do it like this. Also, if you want the div id to start with 1, you should do ++i instead of i++. i++ doesn't make sense since that's being done by the for loop automatically.

$(document).ready(function() {
    var divsToAppend = "";
    for (i = 0; i < 35; i++) {
        divsToAppend += '<div id="div' + (++i) + '" />';        
    }
    $('body').append(divsToAppend);
});

answered Dec 11, 2012 at 5:23

Sang Suantak

5,2652 gold badges30 silver badges46 bronze badges

2 Comments

Paul Over a year ago

You said it could make it faster. How?

Sang Suantak Over a year ago

The append method won't be executed each time the loop runs. It will be executed only once at the end. A couple of articles if you want to read Article 1, Article 2

Akhil Sekharan · Accepted Answer · 2012-12-11 05:30:38Z

2

Try:

$(document).ready(function(){
    var html='';
    for(i = 0; i < 35; i++) {
        html += '<div id="div'+ i +'" />';
    }
    $('body').append(html);
});

edited Dec 11, 2012 at 5:30

answered Dec 11, 2012 at 5:17

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

Comments

Joe Mills · Accepted Answer · 2012-12-11 05:17:17Z

1

Take the $(document).ready out of the loop for starters.

$(document).ready(function() {
    // do loop here
}

answered Dec 11, 2012 at 5:17

Joe Mills

1,61911 silver badges12 bronze badges

Collectives™ on Stack Overflow

Create divs using a for loop in jQuery and assign IDs to each div

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related