使用 jQuery 按日期对 XML 结果进行排序答案

【问题标题】：Sorting XML results by date using jQuery使用 jQuery 按日期对 XML 结果进行排序
【发布时间】：2013-12-07 14:11:06
【问题描述】：

我在按日期对返回的 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>

【问题讨论】：

标签： jquery xml sorting date date-sorting

【解决方案1】：

不需要推送到数组。将您的集合转换为对象数组并对其进行排序。变量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');
        });
});

【讨论】：

为您的答案添加解释，这将有助于 p[人们理解。

【解决方案2】：

将时间戳存储在数据属性中，将元素存储在数组中，然后在添加元素之前根据时间戳对数组进行排序：

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

【讨论】：