javascript - 按字母顺序对 DIV 进行排序而不销毁和重新创建它们？

Question

我希望能够通过单击按钮对我页面上的一堆 div 元素进行排序。

都是简单的文字内容，例如:

<div class='sortme'>
    CCC
</div>
<div class='sortme'>
    AAA
</div>
<div class='sortme'>
    BBB
</div>
<div class='sortme'>
    DDD
</div>

当用户点击一个按钮时，它们应该按字母顺序重新排列。显然有很多方法可以做到这一点，最明显的是我们可以将所有内容放入一个数组中，对数组进行排序并基于此重新创建 HTML。

这是此类解决方案的示例:

http://jsfiddle.net/hibbard_eu/C2heg/

但是，如果已经使用了很多代码，这就不太合适了，我希望能够简单地移动 div 而不会做任何破坏性的事情。这可能吗？

Answer 1

1. 用sort()对元素数组进行排序
2. 用 appendTo() 重新附加(在它们的排序状态)

$('.sortme').sort(function(a, b) {
  if (a.textContent < b.textContent) {
    return -1;
  } else {
    return 1;
  }
}).appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='sortme'>
  CCC
</div>
<div class='sortme'>
  AAA
</div>
<div class='sortme'>
  BBB
</div>
<div class='sortme'>
  DDD
</div>