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

【问题标题】：How to create array and divs with a unique height using jQuery?如何使用 jQuery 创建具有唯一高度的数组和 div？
【发布时间】：2012-01-16 15:31:45
【问题描述】：

我的图表需要 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])
}

任何想法为什么会发生这种情况？

【问题讨论】：

当您使用无单位高度值（即随机数）时，我建议使用.height(valuesG[i]) 而不是.css(..)，因为css 值可能希望您也提供单位值（即“px”） - 它可能对你有用，但我更愿意确定

标签： javascript jquery arrays dom-manipulation

【解决方案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

【讨论】：

【解决方案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");
    }

【讨论】：

【解决方案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");
}

【讨论】：