Question

我正在创建一个xml事件列表，用jQuery解析到UL列表：

<?xml version="1.0" encoding="windows-1252"?>
<rss version="2.0">
<items>
<item>
    <year>2016</year>
    <month>July</month>
    <date>10th</date>
    <title>Event Title</title>
    <url>http://www.google.com</url>
</item>
<item>
    <year>2016</year>
    <month>July</month>
    <date>14th</date>
    <title>Event Title</title>
    <url>http://www.google.com</url>
</item> 
<item>
    <year>2016</year>
    <month>August</month>
    <date>5th</date>
    <title>Event Title</title>
    <url>http://www.google.com</url>
</item>
</items>
</rss>

jQuery的：

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "upcoming_events.xml",
        dataType: "xml",
        success: parseXml
    });
});

function parseXml(xml) {
    $("#testing").html("<ul class=\"events\" data-role=\"listview\" data-inset=\"true\"></ul>");
    $(xml).find("item").each(function() {
        $("ul.events").append("<li><span>"+$(this).find("date").text()+"</span> "+$(this).find("title").text()+" - "+$(this).find("url").text()+"</li>");
    });  
}

目前输出只是：

<ul>
 <li>date title url</li>
</ul>

理想情况下，我希望输出按月分开，例如：

<h2>August 2016</h2>

<ul>
   <li>5th - Event Title - url</li>
</ul>

<h2>July 2016</h2>

<ul>
   <li>14th - Event Title - url</li>
   <li>10th - Event Title - url</li>
</ul>

任何帮助都很棒，谢谢。

Answer 1

您可以先解析XML数据，然后将对象中的年份和月份值分组，例如

function parseXml(xml) {
    var data = {
        "January": 1,
        "February": 2,
        "March": 3,
        "April": 4,
        "May": 5,
        "June": 6,
        "July": 7,
        "August": 8,
        "September": 9,
        "October": 10,
        "November": 11,
        "December": 12
    };
    var temp = {};
    $("#content").html("<ul class=\"events\" data-role=\"listview\" data-inset=\"true\"></ul>");
    $(xml).find("item").each(function() {
        var month = data[$(this).find("month").text()];
        var year = $(this).find("year").text();
        if (temp[year]) {
            if (temp[year][month]) {
                temp[year][month].push($(this).find("date").text() + $(this).find("title").text() + $(this).find("url").text());
            } else
                temp[year][month] = ($(this).find("date").text() + $(this).find("title").text() + $(this).find("url").text());
        } else {
            temp[year] = {};
            temp[year][month] = [];
            temp[year][month].push($(this).find("date").text() + $(this).find("title").text() + $(this).find("url").text());
        }
    });
    console.dir(temp);
}

然后，根据需要将对象的解析值附加到HTML。

Answer 2

这是一个解决方案。可能不是更好的，但你可以微调。

我很高兴回忆起来，谢谢你的问题！

＆＃13;

$(function() {
  var xml = '<?xml version="1.0" encoding="windows-1252"?><rss version="2.0"><items><item><year>2016</year><month>July</month><date>10th</date><title>Event Title</title><url>http://www.google.com</url></item><item><year>2016</year><month>July</month><date>14th</date><title>Event Title</title><url>http://www.google.com</url></item> <item><year>2016</year><month>August</month><date>5th</date><title>Event Title</title><url>http://www.google.com</url></item></items></rss>',
    $xml = $($.parseXML(xml)),
    items = [],
    sortedItems,
    headers,
    html = "";

  $xml.find("item").each(function() {
    var t = {},
      d = $(this).find("date").text(),
      m = $(this).find("month").text(),
      y = $(this).find("year").text(),
      t = $(this).find("title").text(),
      url = $(this).find("url").text(),
      dt = new Date(d.slice(0, -2) + "-" + m + "-" + y),
      my = m + " " + y;

    t = {
      d: d,
      m: m,
      y: y,
      t: t,
      url: url,
      dt: dt,
      my: my
    };

    items.push(t);
  });

  sortedItems = items.sort(function(a, b) {
    var x = a.dt;
    var y = b.dt;
    return x > y ? -1 : x < y ? 1 : 0;
  });


  Array.prototype.contains = function(v) {
    for (var i = 0; i < this.length; i++) {
      if (this[i] === v) return true;
    }
    return false;
  }

  Array.prototype.unique = function() {
    var arr = [];
    for (var i = 0; i < this.length; i++) {
      if (!arr.contains(this[i].my)) {
        arr.push(this[i].my);
      }
    }
    return arr;
  }

  Array.prototype.filterByValue = function(val) {
    var arr = [];
    for (var i = 0; i < this.length; i++) {
      if (this[i].my == val) {
        arr.push(this[i]);
      }
    }
    return arr;
  }

  headers = sortedItems.unique();

  $.each(headers, function(index, value) {
    html = html + "<h2>" + value + "</h2><ul>";

    var filteredItems = sortedItems.filterByValue(value);

    $.each(filteredItems, function(index, value) {
      html = html + "<li>" + value.d + " - " + value.t + " - " + value.url + "</li>";
    });

    html = html + "</ul>";

  });

  $("#print").text(html);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="print">
</div>

＆＃13;

Answer 3

我推荐PHP。我编写了一个PHP函数，可以在单个网页上多次调用它，并生成您希望看到的布局。

的index.php

function xmlReader($fileName) {

    $xml=simplexml_load_file($fileName.'.xml') or die('Error: Cannot create object');

    $months = array();
    foreach($xml->children() as $getMonths) {
        $months[] = (string) $getMonths->month;
    }
    $months = array_unique($months);

    foreach ($months as $num => $value) {
        echo '<h3>&mdash; '.$value.' &mdash;</h3><ul>';
        foreach($xml->children() as $events) {
            if ($events->month == $value) {
                echo '<li><span>'. $events->date .':</span> '. $events->title .' <a href="'. $events->url .'" target="_blank" title="More Information">-i-</a></li>';
            }
        }
        echo '</ul>';
    }

}

?>

<h2>UPCOMING EVENTS:</h2>
<?php xmlReader("upcoming"); ?>
<h2>EVENTS CALENDAR 2015:</h2>
<?php xmlReader("previous"); ?>

upcoming.xml

<?xml version="1.0" encoding="utf-8"?>
<events>
    <event>
        <date>5th</date>
        <month>January</month>
        <title>Everyday Italian</title>
        <url>http://php.net/manual/en/control-structures.do.while.php</url>
    </event>
    <event>
        <date>5th</date>        
        <month>January</month>
        <title>Harry Potter</title>
        <url>http://php.net/manual/en/control-structures.do.while.php</url>
    </event>
    <event>
        <date>4th</date>
        <month>February</month>
        <title>XQuery Kick Start</title>
        <url>http://php.net/manual/en/control-structures.do.while.php</url>
    </event>
    <event>
        <date>4th</date>
        <month>February</month>
        <title>Learning XML</title>
        <url>http://php.net/manual/en/control-structures.do.while.php</url>
    </event>
    <event>
        <date>5th</date>
        <month>February</month>
        <title>XQuery Kick Start</title>
        <url>http://php.net/manual/en/control-structures.do.while.php</url>
    </event>
    <event>
        <date>12th</date>
        <month>February</month>
        <title>XQuery Kick Start</title>
        <url>http://php.net/manual/en/control-structures.do.while.php</url>
    </event>
    <event>
        <date>25th</date>
        <month>February</month>
        <title>Learning XML</title>
        <url>http://php.net/manual/en/control-structures.do.while.php</url>
    </event>
</events>

jQuery XML Feed to ul list

3 个答案: