0

我已经设法弄清楚如何在 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>

JS

   $(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));
        });
    });
    });

非常感谢！提前​</p>

4

2 回答 2

1

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

我已经更新了您的小提琴，以便它首先创建<ul>然后将<li>项目添加到其中：http: //jsfiddle.net/Erah9/5/

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

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

于 2012-11-08T11:20:50.060 回答
1

您没有正确解析日期，您应该使用例如以下函数：

// 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。

于 2012-11-08T13:15:37.467 回答