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再次跳回来，但代码很快变成了意大利面条连接点，我确定有更优雅的方法来实现这一点。 / p>

我也试过.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

请检查这种方法：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以在问题中使用现有模式，然后使用.slice()，.wrapAll()，.parent()，.wrap()，递归。如果最大变量小于或等于总0 {{1 }}

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>');
});

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

4 个答案: