使用JQUERY每隔X秒对Div进行排序

时间:2010-10-19 07:04:44

标签: jquery sorting

我有5个div,每个都有倒数计时器。以下数字显然会被<br/>除以,但为了示例,我想尽可能清楚: - )

排序前的示例

4.39
3.45
2.11
3.56
1.11

排序后的示例

4.39
3.56
3.45
2.11
1.11

每个倒计时显然都是0。我记得,当一个计时器达到0时,该div被自动排序并放在最后一个位置,然后重新开始。

我正在查看Jquery的网站,我找到的是与拖动相关的,这意味着你必须点击DIV,然后自己移动它。我希望通过一种根据计时器对DIVS进行排序的方法自动实现该动画。

任何人都有一个代码片段,我还没有找到的代码片段,我可能会觉得方便吗? : - )

非常感谢所有帮助!!谢谢!

3 个答案:

答案 0 :(得分:2)

您可以使用普通的jquery选择器获取列表。将所有元素放在单个ul或其他内容中,然后使用vanilla jquery读取。

对于排序,您可以使用Javascript数组可用的sort method

要将li项移动到位,您可以使用重新定位然后使用一些动画(可能使用jquery-ui中的position函数)或只是替换{{1}的内容使用ul

排序列表

最后,要重复执行此操作,您可以使用setInterval功能。

也可以将一些触发器绑定到jquery-ui sortable,然后从li表达式中调用它。我没有试过这个。

答案 1 :(得分:1)

为什么这么复杂?

  1. 迭代DIVs或列表元素
  2. 阅读文字
  3. 将它们转换为double
  4. 将每个值添加到数组
  5. 对数组进行排序
  6. 使用jQuery创建一个HTML字符串
  7. 使用新列表
  8. 替换容器的内容

答案 2 :(得分:0)

您可以对DIV进行排序,然后将已排序的DIV元素逐个附加到HTML容器(例如另一个包含所有这些子DIV的DIV)。