javascript - 组织定位的 LI

Question

我正在尝试按日期组织列表，但<li>元素有position: absolute并且没有按其 DOM 顺序显示。我应该怎么办？

这是我的代码（也位于http://jsfiddle.net/CQ3gg/261/）：

var hli = $('ul li').height();
var wli = $('ul li').width();
var tops = 0;
var lefts = 0;

$('ul li').each(function(i, el){    
    $(el).css({ top: tops });
    tops += hli;
});


var tt = true;

$(".teste").click(function(){
    if(tt == true){
        $("ul li").sort(function(a,b){
            return new Date($(a).attr("data-date")) > new Date($(b).attr("data-date"));
        }).each(function(){
            $("ul").prepend(this);
        });

         tt = false;
    }else if(tt == false){
        $("ul li").sort(function(a,b){
            return new Date($(a).attr("data-date")) < new Date($(b).attr("data-date"));
        }).each(function(){
            $("ul").prepend(this);
        });

        tt = true;
    }   
});

Answer 1

您可以执行类似于您已经在代码顶部执行的操作（示例不考虑降序排序）：

$(".teste").click(function(){
    var tops = 0;
    $("ul li").sort(function(a,b){
        return new Date($(a).attr("data-date")) > new Date($(b).attr("data-date"));
    }).each(function(){
        $(this).css({ top: tops });
        tops += hli; // assumes previously defined hli
    });
});

您还应该使用YYYY-MM-DD日期格式，以避免new Date. 请参阅jsfiddle上的实时示例。