Разбить данные XML из вызова Ajax с помощью jQuery?

Question

У меня есть более длинный список данных из файла XML, который я форматирую в неупорядоченный список. Я хотел бы разбить данные на несколько списков, чтобы я мог отформатировать их в столбцы с помощью CSS. Есть ли способ, которым я могу вставить </ul><ul> каждые 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>");
                });
            });
        }
    });
});

Вот демо, как оно есть на данный момент.

Answer 1

Попробуйте это.

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

Answer 2

Самый простой / самый элегантный подход - это объединить ваш список стран $(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;
}