Javascript 使用jQuery进行UI/DOM排序

所以，我已经搜索了互联网来寻找这方面的帮助

我有一个条形图，其中条/值从左到右排序，最大值在左边。基于用户交互，条形图/值可能会改变，例如，中间的条形图可能需要向左移动1个或多个点。这必须在不移除DOM元素的情况下动态完成，因为我需要设置从左到右移动的动画。。。这是为了吸引用户，这对项目非常重要

所以，我想我的问题是，既然不能同时使用DOM元素并设置它们的动画，那么如何跟踪运动呢。我曾经尝试过在页面加载时创建图表的初始索引，并在进行更改时更新索引。从逻辑上讲，我很难接受这一点。另外，如果要这样做，使用数据属性进行索引的最佳方式是什么？这不是只有HTML5，而且在旧浏览器中可能不受支持，还是jQuery保留了一个与HTML5无关的缓存

我对javascript/jQuery相当陌生。我会说我已经使用它两年了，但我实际上只做过小的jQuery动画和验证。我真的很喜欢社区的一些意见

---

谢谢大家!

没错，不能通过排序设置元素的动画

诀窍是使用CSS属性在图形空间中定位条，例如

left

或

margin left

然后你有一些东西，当以正确的方式改变时，会产生动画效果

您所需要做的就是依次遍历每个条，计算其新的CSS left/margin left属性，并使用jQuery的

.animate（）

使其滑入新位置

假设要用

左边距定位的条形图

，并且条形图的高度也需要更改，那么jQuery的一般形式将是：

$(".bars").each(function(i, bar) {
    var $bar = $(bar);
    var marginLeft = ........;//expression that calculates or fetches the new margin-left property for bar i
    var height = ........;//expression that calculates or fetches the new height property for bar i
    $bar.animate({
        'margin-left': marginLeft,
        'height': height
    );
})

---

无需对任何内容进行排序或使用数据属性。

使用“数据-”属性绝对是一种可行的解决方案<代码>$。数据即使在较旧的浏览器中也可以获取数据（它被视为非标准属性），所以不用担心。我昨晚终于大致解决了这个问题。我的问题不一定与动画有关，而是在条改变时对条进行排序，注意DOM中的顺序永远不会改变。最后我使用了一个REL属性，随着bar值的改变而更新它。我能够索引REL属性，对它们进行排序，并使用与索引匹配的jQuery对象引用每个条。