Размещение декорированных серий тегов div на экране с использованием DOM JQUERY RELATED

Question

Я использую JQuery для позиционирования серии тегов div, которые в основном используют класс внутри тега, который декорирует div в виде столбцов. Таким образом, div - это зеленая коробка, основанная на спецификациях CSS для стекла.

У меня есть список НАЧИНАЮЩИХ позиций,

список левых координат - для начальных точек, которые я хочу расположить в DIV скажем, 556, 560, 600 они автоматически генерируются как левые позиции в списке

У меня есть список КОНЕЧНЫХ позиций,

список левых координат - для конечных точек, которые я хочу расположить в DIV скажем, 570, 590, 610 они автоматически генерируются как левые позиции в списке

теперь для каждой начальной и конечной позиции столбец (зеленое поле) я хочу нарисовать с соответствующей шириной, как показано ниже. скажем, f - это смещение или позиция начала, а ff - смещение или позиция конца:

Ниже изображено зеленое поле, основанное только на одной начальной и конечной позиции ВЛЕВО.

 if (f.left != 0) {

                        $("#test").html($("<div>d</div>")).css({
                            position: 'absolute',
                            left: (f.left) + "px",
                            top: (f.top + 35) + "px",
                            width: (ff.left - f.left) + 25 + "px"
                        }).addClass("option1");

                    }

Я хочу просмотреть список позиций в списке и нарисовать несколько зеленых прямоугольников в зависимости от позиций на экране. Приведенный выше код рисует только одну зеленую рамку из последней позиции смещения.

Answer 1

Хорошо,

Так переберите свой массив f.

поскольку f и ff имеют одинаковую длину, я знаю, что позиция 0 массива f относится к позиции 0 массива ff.

В настоящее время вы помещаете div в элемент с именем test, а затем применяете абсолютное позиционирование к элементу «test», а затем к классу.

слегка изменив код вместо использования html Я бы использовал append

append должен оставить любой код, который вы, возможно, уже добавили к элементу "test".

На этом этапе я бы тоже хотел создать атрибуты стиля и класса целиком.

$("#test").append("<div style='position:absolute;left:" + f[i].left + "px;top:" + ...
... + " class='optonal'>d</div>");

У меня может быть несколько синтаксических ошибок, извините за эти