jQuery，将单个xml列表解析为多个无序列表
jQuery, parse single xml list into multiple unordered lists
源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个左右的块中(稍后与unslider一起使用(。
我试过在.each函数中运行计数器，并使用return false再次跳出来，但代码很快就变成了意大利面条连接，我相信有一种更优雅的方法可以实现这一点。
我也试过。分体式和绕圈，但一直碰壁。
您可以执行类似的操作
$(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/
请检查此方法：
$(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>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>');
});
您可以在Question中使用现有模式，然后使用.slice()、.wrapAll()、.parent()、.wrap()、递归。创建两个分别定义为0、10的变量，如果最大变量小于或等于总#ticket-test li .length ，则在函数的递归调用中按10递增变量
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>相关文章：
- 如何用javascript从数组中填充无序列表
- 使用无序列表展开DIV
- Angular JS在无序列表中的2个数组中重复
- jQuery 创建多级无序列表
- 正在将无序列表转换为选择..但有一个转折
- addEventListener单击“无序列表”
- 如何在一个随机化的有序列表中随机化多个无序列表
- jQuery 单击外部元素可向上或向下移动包含选中复选框的无序列表项
- 无序列表 jQuery 在固定位置显示列表中的选定项
- 如何将无序列表分成两部分
- JQUERY 在多个无序列表中选择第 n 个列表元素
- 根据不同长度的数据属性对无序列表中的 li 进行排序(无 jquery）
- 如何创建语言选择下拉列表仅使用无序列表
- 抓取表数据并使用jQuery转换为无序列表
- 如何在Spring MVC中实现无序列表的展开/折叠功能
- 如何根据条件显示包含唯一项目符号的无序列表
- 为什么文本粘在CSS无序列表菜单中的图像下方
- 将函数绑定到用作子菜单的无序列表
- 使用 Javascript 优化一个巨大的无序列表
- YouTube播放列表-无序播放/随机功能
