Как создать массив и div с уникальной высотой, используя jQuery?

Question

Мне нужно 100 маленьких делений для моего графика, каждый раз, когда я генерирую их, я все они отображаются одинаковой высоты;последнее значение из массива.

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

Вы получаете только одну высоту (последнюю), потому что вы устанавливаете один и тот же класс css во всех div и обновляете его высоту в каждом цикле, чтобы последнее значение высоты было применено ко всем.

В качестве решения попробуйте это:

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

В настоящее время вы выбираете все элементы с классом single.Чтобы получить желаемый эффект, используйте метод appendTo, как показано ниже.

Примечание: сгенерированные высоты не уникальны, а случайны.Возможно, что существуют два элемента, скажем, с высотой 50. См. этот вопрос , чтобы узнать о методе генерации уникальных случайных чисел.

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