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

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