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上的实际示例。

组织定位的LI

1 个答案: