Question

我尝试修改我的排序功能，以便正确排序日期，但脚本什么都不做。

我的HTML

<div class="sort_date">Sort Date</div>
  <div class="list">
    <div class="dateDiv">04/05/2012, 10:25</div>
    <div class="dateDiv">11/05/2012, 19:41</div>
    <div class="dateDiv">09/05/2012, 07:00</div>
    <div class="dateDiv">09/05/2012, 16:45</div>
  </div>
</div>

我的Javascript代码：

function parseDate(input) {
  var parts = input.match(/(\d+)/g);
  return new Date(parts[0], parts[1]-1, parts[2], parts[3], parts[4]);
}

var NewDate = $.makeArray($(".dateDiv"));
NewDate.sort(function(a, b) {
    console.log( parseDate( $(a).text() ) );
    return parseDate( $(a).text() ) < parseDate( $(b).text() );
});

var OldDate = $.makeArray($(".dateDiv"));
OldDate.sort(function(a, b) {
    console.log( parseDate( $(a).text() ) );
    return parseDate( $(a).text() ) > parseDate( $(b).text() );
});

$(function(){
    var sortHighCheck = null;
    $('.sort_date').click(function(){
        if (sortHighCheck === 1) {
            $(".dateDiv").sort(NewDate).appendTo('.list')
            sortHighCheck = 0;
        } else {
            $(".dateDiv").sort(OldDate).appendTo('.list')
            sortHighCheck = 1;
        }
});
});

这是js fiddle。

我的错误在哪里？有人可以帮忙吗？

Answer 1

您的脚本定义了两个div数组，每个数组在每个方向上排序。所以看来，在click事件中，你只需要用适当排序的内容替换.list的HTML。

function parseDate(input) {
  var parts = input.match(/(\d+)/g);
  return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4]);
}

$(function() {

  var NewDate = $.makeArray($(".dateDiv"));
  NewDate.sort(function(a, b) {
    return parseDate($(a).text()) < parseDate($(b).text());
  });

  var OldDate = $.makeArray($(".dateDiv"));
  OldDate.sort(function(a, b) {
    return parseDate($(a).text()) > parseDate($(b).text());
  });

  var sortHighCheck = null;
  $('.sort_date').click(function() {
    if (sortHighCheck == 1) {
      $('.list').html(NewDate);
      sortHighCheck = 0;
    } else {
      $('.list').html(OldDate);
      sortHighCheck = 1;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sort_date">Sort Date</div>
<div class="list">
  <div class="dateDiv">2012/04/05, 10:25</div>
  <div class="dateDiv">2012/11/05, 19:41</div>
  <div class="dateDiv">2012/09/05, 07:00</div>
  <div class="dateDiv">2012/09/05, 16:45</div>
</div>

另外，请注意我已将年份移至每个字符串的开头。为了创建准确的日期对象，您的解析函数需要特定格式的日期字符串，并列出年份：

新日期（年，月[，日[，小时[，分钟[，秒[，毫秒]]]]]）;

请参阅Date @ MDN

例如：

04/05/2012 =＆gt; 1909年11月2日星期二 2012/04/05 =＆gt; 2012年4月5日星期四

修改

确实，即使首先列出了几个月，列表似乎也能正确排序。但这只是一种幻觉。解析函数将月值视为年，将字符串放入看起来正确的顺序。但是当日期的年份不同时，您可以看到它们实际上并没有按时间顺序排序。这几个月是有序的，但年份不是。

function parseDate(input) {
  var parts = input.match(/(\d+)/g);
  return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4]);
}


$(function() {

  var dates = $.makeArray($(".dateDiv")),
      sortHighCheck = null;
  
  $('.sort_date').click(function() {
    
    if (sortHighCheck == 1) {
      dates.sort(function(a, b) {
        return parseDate($(a).text()) < parseDate($(b).text());
      });
      sortHighCheck = 0;
    } else {
      dates.sort(function(a, b) {
        return parseDate($(a).text()) > parseDate($(b).text());
      });
      sortHighCheck = 1;
    }
    
    $('.list').html(dates);
    
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sort_date">Sort Date</div>
<div class="list">
  <div class="dateDiv">04/05/2012, 10:25</div>
  <div class="dateDiv">11/05/2013, 19:41</div>
  <div class="dateDiv">09/05/2014, 07:00</div>
  <div class="dateDiv">09/05/2015, 16:45</div>
</div>

我的日期排序有什么问题？

1 个答案:

修改