使用 jQuery 重新排序 div答案

【问题标题】：Re-ordering divs with jQuery使用 jQuery 重新排序 div
【发布时间】：2011-08-21 10:52:34
【问题描述】：

是否可以使用 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);
        });

只是获取数据索引号提醒它。

【问题讨论】：

你能展示你已经尝试过的代码吗？ SO 不是社区代码生成器。 ;)
这可能会有所帮助：stackoverflow.com/questions/929519/…

标签： jquery html sql-order-by

【解决方案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');
    }));
});

Live demo

【讨论】：

这里不需要 .each，$('.sortable').append($('.score').sort(function(a, b) { return $(a).data('index') - $(b).data('index'); }));
@Chamika Sandamal：我将每个都添加为功能，因此 OP 可以在同一类的任何元素上使用它。但当然，这可以拿走。

【解决方案2】：

function sortDivs(a,b){  
    return $(a).data("index") > $(b).data("index") ? 1 : -1;  
};  


$(".score").sort(sortDivs).appendTo($("#results"));

这是demo

【讨论】：

$(a).data("index") > $(b).data("index") ? 1 : -1;
谢谢，根据你的评论改进了，之前没用过数据法。