javascript - jQuery，将单个 xml 列表解析为多个无序列表

Question

源 XML 如下所示:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<area>
    <ticket>
        <ticketnumber>001</ticketnumber>
        <location>Location</location>
    </ticket>
    <ticket>
        <ticketnumber>001</ticketnumber>
        <location>Location</location>
    </ticket>
    <ticket>
        <ticketnumber>001</ticketnumber>
        <location>Location</location>
    </ticket>...
</area>

我可以使用以下代码将其解析为现有的无序列表:

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "feed.xml",
        dataType: "xml",
        success: function(xml) {
                $(xml).find('ticket').each(function(){
                    var varTicket = $(this).find('ticketnumber').text();
                    var varLocation = $(this).find('location').text();
                    var varTheHTML = '<li>'+varTicket+' '+varLocation+'</li>';
                    $(varTheHTML).appendTo("#ticket-test");
                });
        },
        error: function() {
            alert("The XML File could not be processed correctly.");
        }
    });

});

这为我提供了预期的填充列表。

<ul id="ticket-test">
    <li>001 Location</li>
    <li>001 Location</li>
    <li>001 Location</li>...
</ul>

当我需要将这个列表拆分成多个列表时，问题就开始出现了，最好嵌套在主列表中。新结构现在是:

<ul id="ticket-test">
    <li>
        <ul>
            <li>001 Location</li>
            <li>001 Location</li>
            <li>001 Location</li>...
        </ul>
    </li>
    <li>
        <ul>
            <li>001 Location</li>
            <li>001 Location</li>
            <li>001 Location</li>...
        </ul>
    </li>...
</ul>

源 XML 本质上是一个平面列表，因此我需要将这些列表项分配到 block 中，例如 10 个左右(稍后与 unslider 一起使用)。

我已经尝试在 .each 函数中运行计数器并使用 return false 再次跳出，但代码很快变成了意大利面条式连接，我确信有更优雅的方法可以实现这一点。

我也尝试过 .split 和 for 循环，但总是碰壁。

Answer 1

你可以这样做

  $(document).ready(function() {
    $.ajax({
      type: "GET",
      url: "feed.xml",
      dataType: "xml",
      success: function(xml) {
        var html = '<li><ul>';
        var counter = 10;
        $(xml).find('ticket').each(function(i, v) {
          var varTicket = $(v).find('ticketnumber').text();
          var varLocation = $(v).find('location').text();
          if (i > 0 && i % counter == 0) {
            html += '</ul></li><li><ul>';
          }
          html += '<li>' + varTicket + ' ' + varLocation + '</li>';



        });
        $(html + '</ul></li>').appendTo("#ticket-test");
      },
      error: function() {
        alert("The XML File could not be processed correctly.");
      }
    });

  });

查看演示:https://jsfiddle.net/y0d1or6h/