How to create array and divs with a unique height using jQuery?

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?

As you are working with a unit-less height value (i.e. the random numbers) I would recommend 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, Dec 09 '11 at 10:06

kapa · Accepted Answer · 2013-11-05T23:17:03.093

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

score 1 · Answer 2 · edited May 23 '17 at 12:11

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");
    }

score 1 · Answer 3 · answered Dec 09 '11 at 10:02

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");
}

How to create array and divs with a unique height using jQuery?

3 Answers3