用jQuery重新排序div

Question

是否可以用jQuery重新排序某些div。我的div很少，我想根据div中的数据索引号在页面加载时对其重新排序。

现在：

<div class="score" data-index="3">3</div>
<div class="score" data-index="2">2</div>
<div class="score" data-index="1">1</div>
<div class="score" data-index="4">4</div>

我想要的是：

<div class="score" data-index="1">1</div>
<div class="score" data-index="2">2</div>
<div class="score" data-index="3">3</div>
<div class="score" data-index="4">4</div>

我相信使用jQuery应该有可能。我去每个div并获取数据索引号，但是如何实际排序：D

谢谢！

编辑：一件事是HTML的顺序可以在每次页面加载时变化（顺序可以为3、2、1、4或4、1、3、2或其他任何形式）。

这是我现在拥有的唯一JS：

$("html .score").each(function(index, domEle) {
            var score = $(domEle).attr("data-index");
            alert(score);
        });

只是得到数据索引号警报它。

Answer 1

的HTML

<div class="sortable">
    <div class="score" data-index="3">3</div>
    <div class="score" data-index="2">2</div>
    <div class="score" data-index="1">1</div>
    <div class="score" data-index="4">4</div>
</div>

jQuery ---------升序

$('.sortable').each(function(){
    var $this = $(this);
    $this.append($this.find('.score').get().sort(function(a, b) {
        return $(a).data('index') - $(b).data('index');
    }));
});

---------降序

$('.sortable').each(function(){
    var $this = $(this);
    $this.append($this.find('.score').get().sort(function(a, b) {
        return $(b).data('index') - $(a).data('index');
    }));
});

现场演示