Question

我的图表需要100个小div，每次生成它们时，它们都显示为相同的高度;数组中的最后一个值。

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])
}

为什么会发生这种情况？

Answer 1

您正在将新高度应用于每次迭代中的所有.single元素。在最后一次迭代中，它们最终具有相同的高度。

你可以这样做：

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

另外，您的代码效率不高，请看一下：

    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

Answer 2

目前，您正在选择类single的所有元素。要获得所需效果，请按照下图所示的方式使用appendTo方法。

旁注，生成的高度不是唯一的，而是随机的。例如，高度50可能存在两个元素。有关生成唯一随机数的方法，请参阅this question。

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

Answer 3

你只得到一个高度（最后一个），因为你在所有div中设置相同的css类并在每个循环中更新它的高度，所以最后的高度值将应用于所有。

作为解决方案，试试这个：

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

如何使用jQuery创建具有唯一高度的数组和div？

3 个答案: