用jQuery从Ajax调用中分解XML数据？

我有一个XML文件中的大量数据列表，正在将其格式化为无序列表。我想把数据分成多个列表，这样我就可以用CSS将它们格式化成列。有没有办法每隔20条左右插入一个

以下是我的AJAX/jQuery的外观：

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "lang-select.xml",
        dataType: "xml",
        success: function(xml) {
            var countries = $('div.countries ul');
            $(xml).find('dropdown').each(function(){
                $(this).find('country').each(function(){
                    var url = $(this).attr('url');
                    var label = $(this).text();
                    countries.append("<li><a href='"+ url +"' style='background-image: url(images/" + label.replace(/ /g,'').toLowerCase() + ".jpg);'>" + label + "</a></li>");
                });
            });
        }
    });
});

$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:“lang select.xml”，
数据类型：“xml”，
成功：函数（xml）{
风险值国家=$（“分类国家ul”）；
$（xml）.find（'dropdown'）.each（function（）{
$（this）.find（'country'）.each（function（）{
var url=$（this.attr（'url'）；
var label=$（this.text（）；
国家。附加（“
”）；
});
});
}
});
});

---

最简单/最优雅的方法是将您的国家列表

$（this.find（'country'）

分割成一个固定长度数组

然后，嵌套几个循环以迭代数组，为每个数组构建一个列表

编辑：所以您的代码按原样在单个列表中创建了一组项。你需要做的是找出每20项发生的时间，最简单的方法是分解你的数组，类似这样的事情

$(document).ready(function() {
$.ajax({
    type: "GET",
    url: "lang-select.xml",
    dataType: "xml",
    success: function(xml) {
        var countriesList = $('div.countries ul');
        var countriesListItems = [];

        $(xml).find('dropdown').each(function(){
            $(this).find('country').each(function(){
                var url = $(this).attr('url');
                var label = $(this).text();
                var listItem = $("<li><a href='"+ url +"' style='background-image: url(images/flags/" + label.replace(/ /g,'').toLowerCase() + ".jpg);'>" + label + "</a></li>");

                countriesListItems.push(listItem);                
            });
        });

        var chunkedCountriesListItems = chunk(countriesListItems, 20);

        var currentList = countriesList;
        $.each(chunkedCountriesListItems, function() {
            $.each(this, function() {
                currentList.append(this);
            });
            countriesList.after(currentList);
            currentList = $('<ul />');
        });
    }
});

function chunk(arr, len){
    for(var x, i = 0, c = -1, l = arr.length, n = []; i < l; i++)
        (x = i % len) ? n[c][x] = arr[i] : n[++c] = [arr[i]];
    return n;
}

$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:“lang select.xml”，
数据类型：“xml”，
成功：函数（xml）{
var countriesList=$（“div.countries ul”）；
var countriesListItems=[]；
$（xml）.find（'dropdown'）.each（function（）{
$（this）.find（'country'）.each（function（）{
var url=$（this.attr（'url'）；
var label=$（this.text（）；
var listItem=$（“
”）；
countriesListItems.push（列表项）；
});
});
var chunkedCountriesListItems=块（countriesListItems，20）；
var currentList=countriesList；
$.each（chunkedCountriesListItems，function（）{
$.each（此，函数（）{
currentList.append（这个）；
});
countriesList.after（当前列表）；
currentList=$（“
”）；
});
}
});
功能块（arr、len）{
对于（变量x，i=0，c=-1，l=arr.length，n=[]；i

试试这个

$(xml).find('dropdown').each(function(){

    var $countries = Math.ceil($('country', this).length); // country amount found in this dropdown

    var groups = '';

    for(var i = 0; i < $countries; i++)
    {
        var url = $('county:eq('+i+')', this).attr('url'); // eq(number) - finds the item at that index
        var label = $('country:eq('+i+')', this).text();

        if(i%20 == 0) groups += '<ul>';
        groups += "<li><a href='"+ url +"' style='background-image: url(images/flags/" + label.replace(/ /g,'').toLowerCase() + ".jpg);'>" + label + "</a></li>";
        if(i%20 == 19 || i == $countries-1) groups += '</ul>';

    }

    countries.append(groups);
});

$（xml）.find（'dropdown'）.each（function（）{
var$countries=Math.ceil（$（'country'，this.length）；//在此下拉列表中找到的国家金额
var组=“”；
对于（var i=0；i<$countries；i++）
{
var url=$（'county:eq（'+i+'），this.attr（'url'）；//eq（number）-在该索引处查找项
var label=$（'country:eq（'+i+'），this.text（）；
如果（i%20==0）组+='
'；
组+=“
”；
如果（i%20==19 | i==$countries-1）组+='
'；
}
国家（集团）；
});

嗯……很抱歉，我不知道怎么做。我是jQuery的初学者。谢谢，但这阻止了它从XML中呈现任何项目。@Tom，该调试了。在调用

chunk

之前检查

CountriesItItems

是否有值。然后检查

chunkedCountriesItItems

是否有值并向

$添加一些警报。每个
循环以查看它是否实际在循环。最后，检查
countriesList.after（currentList）
正在工作。它应该在它创建的上一个之后添加一个新的
。好的，我添加了警报，直到可以看到新的东西。当我将它放在
$之后时。每个（这个，函数（）{
然后列表项开始一个接一个地出现，但在第一个区块的最后一个出现时消失（我将每个区块中的数字减少到5，以加快观看它的发生）。请转到此处查看：