jQuery日期不排序正确排序和li元素跳跃时按下按钮

问题描述：

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

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

太谢谢你了！提前

答

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

我已经更新您的拨弄，使其首先创建<ul>，然后添加<li>项目是：http://jsfiddle.net/Erah9/5/

至于排序：我觉得莫名其妙白天和日期的月份也越来越混向上。我摆弄周围，并得到它的工作（看起来是这样），与this SO issue帮助过

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

感谢您的回复。它已经删除了“跳跃”，但排序本身似乎停止工作后，我第一次按下它。不知道为什么当它在jQuery上运行良好。是否因为我正在研究动态解决方案？以下是我的代码：http://pastebin.com/prtDqfx4。 JavaScript和CSS保持不变。 – methuselah

您是否尝试在服务器端PHP代码中交换日期的日期和月份？我认为你把它们混合起来，javascript会把这一天作为一个月，反之亦然 –

检查我更新的答案（http://jsfiddle.net/Erah9/10/） –

答

你没有正确地分析日期，你应该使用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的许多元素。

jQuery日期不排序正确排序和li元素跳跃时按下按钮

相关推荐