Question

我有一个XML文件的loooong列表，我将其格式化为无序列表。我想将数据拆分成多个列表，以便我可以使用CSS将它们格式化为列。有没有办法可以每隔20条左右插入一个</ul><ul>？

这是我的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>");
                });
            });
        }
    });
});

Here's the demo as it is currently.

Answer 1

最简单/最优雅的方法是将国家/地区列表$(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;
}

Answer 2

试试这个。

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

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

2 个答案: