JavaScript按表上的日期排序不起作用

Question

嗨我无法在日期上获得排序功能。它改变了行的顺序，但它没有正确排序，并且日期到处都是。

我希望即将举办的活动能够参加未来的活动。

请参阅下面的代码。

＆＃13;

＆＃13;

$('tr.Entries').sort(function(a,b){
  return new Date(jQuery(a).find('td.event-date > a').text()).getTime() < 
    new Date(jQuery(b).find('td.event-date > a').text()).getTime() 
}).appendTo('tbody');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="event clearfix">
  <thead>
    <tr>
      <td>Date</td>
      <td>Event</td>
      <td>Location</td>
      <td>Ticket</td>
    </tr>
    <tr class="space"></tr>
  </thead>
  <tbody>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">25/08/2017</a>
      </td>
      <td class="event-title">
        <a href="#">Live N Local Winter Music Festival</a> 
      </td>
      <td class="event-location">
        <a href="#">Pause Bar, Balaclava</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a> 
      </td>
    </tr>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">15/04/2017</a>
      </td>
      <td class="event-title">
        <a href="#">Reggae, Seggae &amp; Sega Night</a>
      </td>
      <td class="event-location">
        <a href="#">Bar Open, Fitzroy Melbourne</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a>
      </td>
    </tr>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">06/05/2016</a>
      </td>
      <td class="event-title">
        <a href="#">The Sunraysia Multicultural Festival</a>
      </td>
      <td class="event-location">
        <a href="#">Nowingi Place, Mildura Victoria</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

谢谢！

更新

我似乎在数组中添加日期然后对它们进行排序 - 现在我只是将它们追加到身体上了吗？感谢

var dates = jQuery('tr.Entries').find('td.event-date > a').map(function() {
             return jQuery(this).text();
          }).get();
dates.sort(function(a,b){
var dateA = a;
dateA = dateA.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
var dateB = b;
dateB = dateB.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');

return new Date(dateA).getTime() - new Date(dateB).getTime();
});
jQuery.each(dates, function (index, value) {
     //how to append back to tbody?
     console.log(value);
});

Answer 1

new Date()不知道如何解析第一部分中与日期相对的日期。 Date需要格式MM/DD/YYYY

如果您的第一次约会25/08/2017并将其传递给new Date()，您将收到Invalid Date回复。

如果你希望这个工作，你需要确保将日期格式化为Date理解的内容，这样你就可以以编程方式进行交换，或者你也可以手动将参数传递给{{3 }}

Answer 2

您的日期字符串格式不正确。您可以使用string#replace()将日期字符串从MM-DD-YYYY更改为DD\MM\YYYY，然后转换为日期并进行比较。

＆＃13;

＆＃13;

$('tr.Entries').sort(function(a,b){
  
 var dateA = jQuery(a).find('td.event-date > a').text();
 dateA = dateA.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
 var dateB = jQuery(b).find('td.event-date > a').text();
 dateB = dateB.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');

 return new Date(dateB).getTime() - new Date(dateA).getTime();;

}).appendTo('tbody');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="event clearfix">
  <thead>
    <tr>
      <td>Date</td>
      <td>Event</td>
      <td>Location</td>
      <td>Ticket</td>
    </tr>
    <tr class="space"></tr>
  </thead>
  <tbody>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">15/04/2017</a>
      </td>
      <td class="event-title">
        <a href="#">Reggae, Seggae &amp; Sega Night</a>
      </td>
      <td class="event-location">
        <a href="#">Bar Open, Fitzroy Melbourne</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a>
      </td>
    </tr>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">06/05/2016</a>
      </td>
      <td class="event-title">
        <a href="#">The Sunraysia Multicultural Festival</a>
      </td>
      <td class="event-location">
        <a href="#">Nowingi Place, Mildura Victoria</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a>
      </td>
    </tr>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">25/08/2017</a>
      </td>
      <td class="event-title">
        <a href="#">Live N Local Winter Music Festival</a> 
      </td>
      <td class="event-location">
        <a href="#">Pause Bar, Balaclava</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a> 
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

var dates = ['25/08/2017', '09/09/2017', '15/09/2017', '16/09/2017', '28/09/2017', '10/12/2017', '10/02/2018', '16/12/2017'];

dates.sort(function(a,b){
 var dateA = a;
 dateA = dateA.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
 var dateB = b;
 dateB = dateB.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');

 return new Date(dateA).getTime() - new Date(dateB).getTime();
});
           
console.log(dates);

＆＃13;

＆＃13;

＆＃13;