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本质上是一个平面列表，所以我需要将这些列表项分配到10个左右的块中（以后用于unlider）。

我已经尝试在.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/

Answer 2

请检查这种方法：

 $(document).ready(function() { var xmlString = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>' + '<area>' + '<ticket>' + '<ticketnumber>001</ticketnumber>' + '<location>Location</location>' + '</ticket>' + '<ticket>' + '<ticketnumber>002</ticketnumber>' + '<location>Location</location>' + '</ticket>' + '<ticket>' + '<ticketnumber>003</ticketnumber>' + '<location>Location</location>' + '</ticket>' + '<ticket>' + '<ticketnumber>004</ticketnumber>' + '<location>Location</location>' + '</ticket>' + '<ticket>' + '<ticketnumber>005</ticketnumber>' + '<location>Location</location>' + '</ticket>' + '<ticket>' + '<ticketnumber>006</ticketnumber>' + '<location>Location</location>' + '</ticket>' + '</area>'; var xmlDoc = jQuery.parseXML(xmlString); var tempUL = $('<ul></ul>'); //creating a temp ul tag $(xmlDoc).find('ticket').each(function() { var varTicket = $(this).find('ticketnumber').text(); var varLocation = $(this).find('location').text(); var varTheHTML = '<li>' + varTicket + ' ' + varLocation + '</li>'; tempUL.append(varTheHTML) }); //change below number as per your requirement var numberOfLi = 3; while (1) { var liSet = tempUL.find("li:lt(" + numberOfLi + ")").detach(); //detaching the set of li to make new ul var newUL = $("<ul></ul>").append(liSet); var topLI = $("<li></li>").append(newUL); topLI.appendTo("#ticket-test"); if (tempUL.find("li").length == 0) break; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> my list <ul id="ticket-test"></ul> 

Answer 3

您可以在Question使用现有模式，然后使用.slice() .wrapAll() .parent() .wrap() ，递归。 创建定义为两个变量0 ， 10由分别递增变量10递归调用函数中，如果最大的变量小于或等于总#ticket-test li .length

 var tickets = $("#ticket-test li"); function wrapListItems (el, num, i = 0, n = num) { if (n <= tickets.length) { el.slice(i, n).wrapAll("<ul>").parent().wrap("<li>"); i += num; n += num; wrapListItems(el, num, i, n); } }; wrapListItems(tickets, 10); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <ul id="ticket-test"> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> <li>001 Location</li> </ul> 

Answer 4

var counter = 2;//change to whatever u need
var mainHtmlElement = $('#ticket-test');
var htmlElement;

$('xml').find('ticket').each(function(index){
  if(index % counter == 0) {
    htmlElement = $('<ul class="level_2"></ul>');
    var el_li = $('<li class="level_1"></li>');
    htmlElement.appendTo(el_li);
    el_li.appendTo(mainHtmlElement);
  }
  var varTicket = $(this).find('ticketnumber').text();
  var varLocation = $(this).find('location').text();
  htmlElement.append('<li class="level_2">'+varTicket+' '+varLocation+'</li>');
});