给许多DIV留出余量是很慢的

Giving many DIVs margin-left is slow

本文关键字：余量 许多 DIV      更新时间：2023-09-26

我正在制作一个基于jquery的甘特图，但我遇到了一个问题。甘特图可用于显示相当大的项目（100 到 500 个任务）。甘特图的条形以 DIV 的形式保存。 给500 DIV 的余量非常慢。我已经做了一些思考/测试，似乎包装所有 DIV，然后给出包含 DIV 边距的效果要快得多。

当前结构（简化）：

<tr class="task-row">
  <td>Task Name</td>
  <td><div class="gantt-bar"></div></td>
</tr>

移动所有甘特图条的唯一方法是选择所有甘特条，然后添加边距。

$(".gantt-bar").css("margin-left", "+=24px");

拟议结构（简化）：

<div>
   <div class="left-panel">
        <div>Project Name</div>
   </div>
   <div class="right-panel">
        <div class="container">
            <div class="gantt-bar"></div>
        </div>
   </div>
</div>

在这种情况下，移动容器 DIV 会更快。

$(".container").css("margin-left", "+=24px");

示例：http://jsfiddle.net/cvJqP/2/

那个小提琴告诉我它应该有效。我问这个问题而不实施的原因是，目前整个事情都是用表格完成的，将其更改为使用 DIV 是一项相当大的任务。只是想在我开始做之前确保这实际上有效。

这是解决问题的最佳方法吗？有没有办法保持表实现？

谢谢。

使用的解决方案：

<tr class="task-row">
      <td>Task Name</td>
      <td><div class="base"><div class="gantt-bar"></div></div></td>
</tr>
var newmargin = parseInt($(".base:first-child").css("margin-left").replace("px", "")) + 24 + "px";
$(bars).css('margin-left', newmargin);

这更快，因为不必为每个 DIV 重新计算保证金。

分配

1000 个边距的速度并不慢，而是检测和计算每个元素的边距值。

尝试只检测第一个孩子的值，然后像这样对它们进行一些处理：

$(".r-many").click(function() {
    var oldval=$(".bar:first-child").css('margin-left').replace('px', '');
    newval=parseInt(oldval)+24+'px';
$(".bar").css('margin-left', newval);  
});

这是闪电般的小提琴：http://jsfiddle.net/sQHCY/

我希望这就是你想要的。

我不确定您的表实现是什么样的，但您不能将左边距添加到表中吗？如果没有，您可以随时使用容器包装表并执行与示例相同的操作。

将所有

DIV 包装在一个容器中并将左边距应用于该容器是完全有意义的。

如果我

是你，我会研究一个久经考验的jquery插件，如jQuery.Gantt。

通常情况下，这些插件已经解决了您在此过程中会遇到的许多问题。

相关文章：