For loop to fill my div box's

StackOverflow https://stackoverflow.com/questions/22157705

Question

Confused on why this isnt filling my div box's with 1-28 please help.

$(document).ready(function () {
    var $newdiv = $('div.box').text(i);
    for (var i =2; i <28; i++) {
        $newdiv = $('div.box').text(i);
        $('div.box').append($newdiv);
    }
});

No correct solution

OTHER TIPS

You need to alter your conditions. Right now you are starting at i=2 and ending at i=27. Change your for-loop to do this instead:

for (var i=1; i<=28; i++) {
    // ...
}

JavaScript objects are passed by reference. Therefore, you're changing the text of the original DOM object, not creating a new one. Try the following:

// Shorthand for $(document).ready(function () { ... });
$(function () {
    // Create an array to store your new elements temporarily.
    var newDivs = [];
    for(var i = 1; i < 29; i++) {
        // Create your new <div> elements and push them to
        // your array. Using the following syntax for
        // creating elements allows jQuery to use
        // document.createElement internally.
        newDivs.push($('<div />', { "class": "box", "text": i }));
    }
    // Once all elements are created, append the entire
    // group to the $('div.box') element.
    $('div.box').append(newDivs);
});

TRY this .It's tested.

    <pre>

<html>
<head> 
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> 
 <script>      
   $(document).ready(function () {
     for (var i=1; i <28; i++) {
      $('#box').append(i+" ");
      }
    });
 </script>
</head>
<body>
<style type="text/css">
#box{
    border: 1px solid red;
    height: 100px;
    width: 100px;

}
</style>
 <div id="box">
 </div>
</body>
</html>


<code>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top