I need 100 small divs for my chart, every time I generate them, I they all appear as the same height; the last value from the array.

var valuesG = new Array(100);
for (i = 0; i < valuesG.length; i++ ) {
    valuesG[i] = Math.floor(Math.random() * 101);   
    $("#second").append("<div class='single'></div>");
    $(".single").css('height', valuesG[i])
}

Any ideas why this is happening?

I need 100 small divs for my chart, every time I generate them, I they all appear as the same height; the last value from the array.

var valuesG = new Array(100);
for (i = 0; i < valuesG.length; i++ ) {
    valuesG[i] = Math.floor(Math.random() * 101);   
    $("#second").append("<div class='single'></div>");
    $(".single").css('height', valuesG[i])
}

Any ideas why this is happening?

• javascript
• jquery
• arrays
• dom-manipulation

• As you are working with a unit-less height value (i.e. the random numbers) I would remend using .height(valuesG[i]) instead if .css(..) because the css value may expect you to supply the unit value aswell (i.e. "px") - it may work for you as is, but I prefer to be sure – musefan Commented Dec 9, 2011 at 10:06

3 Answers 3

You are applying the new height to ALL the .single elements in every iteration. In the last iteration, they end up having the same height.

You could do it like this:

$('<div class="single">')
    .css('height', valuesG[i])
    .appendTo($('#second'));

Also, your code is not very efficient, take a look at this:

    var valuesG = [], //array literal
        $elements = $(); //empty jQuery object

    for (var i = 0; i < 100; i++) { //we don't have to query array length each iteration
        valuesG[i] = Math.floor(Math.random()*101); 

        //collect the elements into a jQuery object
        $elements = $elements.add($('<div class="single">').css('height', valuesG[i]));
    }

    $elements.appendTo($("#second")); //insert to DOM once - much quicker

jsFiddle Demo

Currently, you're selecting all elements with class single. To get the desired effect, use the appendTo method in the way as shown below.

Side note, the generated heights are not unique, but random. It's possible that two elements exist with, say, height 50. See this question for a method to generate unique random numbers.

    var valuesG = new Array(100), i;
    for ( i=0; i < valuesG.length; i++ )
    {
        valuesG[i] = Math.floor(Math.random()*101); 
        $("<div class='single'></div>")
           .css( 'height', valuesG[i] )
           .appendTo("#second");
    }

You get only one height(last one) because you set same css class in all div and update it's height in every loop so last height value will be applied to all.

As a solution try this:

for ( i=0; i < valuesG.length; i++ )  {
   valuesG[i] = Math.floor(Math.random()*101); 
   $("<div class='single'></div>").css('height',valuesG[i]).appendTo("#second");
}