Question

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?

Answer 1

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