jQuery 日期无法正确排序，按下按钮时 li 元素会跳转答案

【问题标题】：jQuery dates not sort sorting properly and li element jumps when button is pressedjQuery 日期无法正确排序，按下按钮时 li 元素会跳转
【发布时间】：2012-11-09 00:49:05
【问题描述】：

我已经设法弄清楚如何在 jQuery 中对日期进行排序，但我注意到某些日期没有正确排序，并且当按下其中一个按钮时会有一点跳跃。我该如何解决这个问题？我已经在http://jsfiddle.net/Erah9/1/ 上发布了我的代码。到目前为止，这是我的代码：

HTML

<div style="padding-top: 20px;">
<input class="btn" type="button" value="Oldest First" id="sortAsc"/>
<input class="btn" type="button" value="Newest First" id="sortDesc"/>
</div>

<div id="wrapper" style="padding-top: 20px">
        <ul>
        <li class='item'><div class='activity_date'>01/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Allocated request</div>
        </div></li><li class='item'><div class='activity_date'>03/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Failed request</div>
        </div></li><li class='item'><div class='activity_date'>08/10/2012</div>

        <!---------------- 
        SEE JS FIDDLE FOR MORE OF THIS
        ----------------->        

        </li>          
        </ul>
</div>

   $(function(){ 
    var itemsArray = $('li.item');
    itemsArray.sort(function(a,b){
        var aTime = new Date($(a).find('.activity_date').text()).getTime();
        var bTime = new Date($(b).find('.activity_date').text()).getTime();
        return aTime - bTime;
    });

    $('#sortAsc').click(function(){
        $("#wrapper").empty();
        $(itemsArray).each(function(){
            $("#wrapper").prepend($(this));
        });
    });

    $('#sortDesc').click(function(){
        $("#wrapper").empty();
        $(itemsArray).each(function(){
            $("#wrapper").append($(this));
        });
    });
    });

非常感谢！提前

【问题讨论】：

标签： jquery

【解决方案1】：

您正在添加 <li> 项目而不将它们封装在 <ul> 中。无序列表有一个默认的边距，它首先显示，但是一旦你清空包装器 div 并且只添加单个 <li> 项目，该边距就会被丢弃。

我已更新您的小提琴，使其首先创建 <ul>，然后向其中添加 <li> 项目：http://jsfiddle.net/Erah9/5/

关于排序：我认为日期的日期和月份以某种方式混淆了。在 this SO issue 的帮助下，我已经摆弄并让它工作（看起来如此）

http://jsfiddle.net/Erah9/10/

【讨论】：

感谢您的回复。它已经消除了“跳跃”，但在我第一次按下它后，排序本身似乎停止了工作。不知道为什么它在 jQuery 上运行良好。可能是因为我正在研究动态解决方案吗？到目前为止，这是我的代码：pastebin.com/prtDqfx4。 JavaScript 和 CSS 保持不变。
您是否尝试过在服务器端 PHP 代码中交换日期的日期和月份？我认为您将它们混合在一起，而 javascript 将日期作为月份，反之亦然

【解决方案2】：

你没有正确解析日期，你应该使用for example following function：

// parse a date in dd/mm/yyyy
function parseDate(input) {
   var parts = input.match(/(\d+)/g);
   // new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
   return new Date(parts[2], parts[1]-1, parts[0]); // months are 0-based
}

另外你的排序函数可以参数化，例如：

function sort(items, order)
{
    return items.sort(function(a,b){
        var ret = parseDate($(a).find('.activity_date').text()) > parseDate($(b).find('.activity_date').text());
        return (order == "asc") ? ret : !ret;
    });
}

用法可以如下：

sort($('li.item'), "desc").each(function(){
    // make some use of the elements sorted in descending order
});

除了您的 html 包含错误之外，例如不要在许多元素上使用相同的 id。

【讨论】：