Я пытаюсь обновить DOM с помощью отсортированных номеров, используя css высоты баров

Question

Я создаю столбики высоты с 40 случайными значениями (например, визуализатор сортировки). и я использую сортировку слиянием для сортировки, поэтому во время первого обновления DOM я создаю случайные значения 1 на 1 в l oop при обновлении его в DOM с CSS height ...

Но в этом случае у меня уже есть 40 отсортированных номеров в списке, так как я могу обновить DOM для каждого индекса, чтобы печатать значения в DOM, используя высоту css (см. Ниже [RadomNumberGeneratedImage] [1], чтобы понять, что я пытаюсь сделать ) ... bcz в случайном числе, я создаю его 1 на 1, но теперь у меня уже есть 40 значений в списке, поэтому я не могу понять, как реализовать его для каждого значения индекса .. всякий раз, когда я нажимаю кнопку mergeSort, DOM очищается с помощью .empty, но тогда он ничего не показывает или просто показывает последнее отсортированное значение для всех 40 баров (например: 190 190 190 .....) вместо сортированных баров .. как можно я показываю для каждого индекса и останавливаюсь после того, как он отсортирован.

Answer 1

Поскольку i не увеличивается и остается на своей последней позиции в вашем коде выше, он всегда будет устанавливать последнее значение Sorted в качестве высоты для всех баров,

Вместо того, что мы можем сделать, сбросьте i до 0 перед запуском forEach и увеличьте его один раз для всех итераций

Просто убедитесь, что длина .frequencyItem элементов равна Sorted длина массива

i = 0;
$('.frequencyItem').each(function()
{
   x = Sorted[i++];
   $(this).css("height", x);
});