给许多DIV左边距很慢

debugcn 发表于 Dev

烈焰人

我在制作基于jquery的甘特图，但是遇到了问题。甘特图可用于显示相当大的项目（100到500个任务）。甘特图的条形图保存在DIV中。给500DIV保证金相当慢。我已经进行了一些思考/测试，似乎包裹了所有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/

希望这就是您想要的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。