javascript - How to create array and divs with a unique height using jQuery? - Stack Overflow

admin管理员组

文章数量:1425775

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

Share Improve this question Follow edited Jul 13, 2012 at 10:15 kapa 78.8k2121 gold badges165165 silver badges178178 bronze badges asked Dec 9, 2011 at 9:59 Davor ZubakDavor Zubak 4,7461414 gold badges6161 silver badges9595 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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

本文标签： javascriptHow to create array and divs with a unique height using jQueryStack Overflow