按字母顺序排序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>

Answer 2

即使没有jQuery也可以很简单地完成

function sortThem(s) {
    Array.prototype.slice.call(document.body.querySelectorAll(s)).sort(function sort (ea, eb) {
        var a = ea.textContent.trim();
        var b = eb.textContent.trim();
        if (a.textContent < b.textContent) return -1;
        if (a.textContent > b.textContent) return 1;
        return 0;
    }).forEach(function(div) {
        div.parentElement.appendChild(div);
    });
}
// call it like this
sortThem('div.sortme');

element .appendChild(x) 将 x 添加为element的最后一个子元素，如果 x 存在于 DOM 中，则将其从其当前位置移动，因此，无需任何体操将其删除到一个位置并将其添加到 t'other