用jQuery重新排序div

时间:2011-08-21 10:52:34

标签: jquery html html5 sql-order-by

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

THX!

编辑:有一件事是HTML中的顺序可能因页面加载而异(订单可以是3,2,1,4或4,1,3,2或其他任何内容)。

这是我现在唯一的JS:

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

只需获取数据索引号就可以发出警告。

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:0)

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


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

这是demo