使用jQuery按日期對XML結果進行排序

Question

按日期排序返回的XML數據時遇到了很多麻煩。日期存儲爲YYYY-MM-DD。我正在努力尋找這種特定日期格式的在線幫助。

這是我的JS：

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "database.xml", 
     dataType: "xml", 
     success: function (xml) { 
      $(xml).find("event").filter(function() { 
       return $(this).find("eventplace").text() == 'NEWCASTLE'; 
      }).each(function() { 
       var title = $(this).find('eventname').text(); 
       var venue = $(this).find('eventvenue').text(); 
       var city = $(this).find('eventplace').text(); 
       var date = $(this).find('eventdate').text(); 
       $('<div class="items">' + title + '</div>').html(title + venue + city + date).appendTo('#comingup'); 
      }); 
     } 
    }); 
}); 

，這裏是我的XML示例：

<Root_Element> 
<eventserie> 
    <event> 
     <eventname>LITTLE COMETS</eventname> 
     <eventvenue>O2 ACADEMY</eventvenue> 
     <eventplace>NEWCASTLE</eventplace> 
     <eventdate>2014-02-21</eventvdate> 
    </event> 
    <event> 
     <eventname>SYMPHONIC PICTURES</eventname> 
     <eventvenue>THE CLUNY</eventvenue> 
     <eventplace>NEWCASTLE</eventplace> 
     <eventdate>2014-03-10</eventvdate> 
    </event> 
    <event> 
     <eventname>LET'S BUY HAPPINESS</eventname> 
     <eventvenue>THINK TANK</eventvenue> 
     <eventplace>NEWCASTLE</eventplace> 
     <eventdate>2014-02-10</eventvdate> 
    </event> 
</eventserie></Root_Element> 

Answer 1

存放在數據屬性的時間戳，並且在數組中的元素，然後在添加元素之前根據時間戳對數組進行排序：

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "database.xml", 
     dataType: "xml", 
     success: function (xml) { 

      var items = []; 

      $(xml).find("event").filter(function() { 
       return $(this).find("eventplace").text() == 'NEWCASTLE'; 
      }).each(function() { 
       var title = $(this).find('eventname').text(); 
       var venue = $(this).find('eventvenue').text(); 
       var city = $(this).find('eventplace').text(); 
       var date = $(this).find('eventdate').text(); 

       items.push(
        $('<div />', { 
         'class' : 'items', 
         text  : title + venue + city + date, 
         'data-d' : new Date(date).getTime() 
        }) 
       ); 
      }); 

      items.sort(function(a, b) { 
       return $(a).data('d').localeCompare($(b).data('d')); 
      }); 

      $.each(items, function(idx, itm) { 
       $('#comingup').append(itm); 
      }); 
     } 
    }); 
}); 

Answer 2

推送到一個數組是不必要的。將你的集合變成一個對象數組並對其進行排序。變量xmlevents演示瞭如何完成。還在循環之外聲明變量var。這隻需要做一次。

$(document).ready(function() { 
    $.ajax({ 
    type: "GET", 
    url: "database.xml", 
    dataType: "xml", 
    success: function (xml) { 
    var xmlevents = $(xml).find("event"); 
    xmlevents.sort(function(a,b){ 
    a = $(a).find("eventdate").text(); 
    b = $(b).find("eventdate").text(); 
    return (a.localeCompare(b)); 
    } 
    var title, venue, city, date 
    xmlevents.each(function() { 
     title = $(this).find('eventname').text(); 
     venue = $(this).find('eventvenue').text(); 
     city = $(this).find('eventplace').text(); 
     date = $(this).find('eventdate').text(); 
      $('<div class="items">' + title + '</div>').html(title + venue + city + date).appendTo('#comingup'); 
     }); 
});