jquery - 加载 x 更多结果？

Question

我有以下代码片段，用于通过 jQuery 从 xml 文件加载 xml：

    $.ajax({
    type: "GET",
    url: "myxml.xml",
    dataType: "xml",
    success: function (data) {
        $(data).find("seperator").each(function () {
                $("body").append($(this).attr("MyAttr"));
        });
    }
});

xml 文件可以包含数百个结果。因此，我不想一次全部显示它们，而是想在页面上添加一个“再加载 20 个……”按钮，这将……再加载 20 个结果。因此，当页面初始加载时，它会显示前 20 个结果，单击按钮，它会从 xml 加载并附加 20 个等。

我怎么能做到这一点？

Answer 1

注意：只是一个演示代码代表一个示例，可以帮助您找到正确的方法。

var items = [];

// creating some demo items
for (var i = 0; i < 100; i++) {
    items.push($('<div>Index ' + i + '</div>'));
}

var alreadyAdded = 0,
    // keep index of last added item
    total = items.length; // total # of items
// function that will add element


function add() {
    $.each(items, function(index, item) {
        $('#container').append(items[alreadyAdded]); // adding element
        alreadyAdded++; // increasing index to keep record of last one added
        if (alreadyAdded % 20 == 0) { // checking that if 20 items added
            return false;
        }
        if (alreadyAdded == total - 1) $('.load').hide(); // hide load button when all items added
    });
}

$('.load').on('click', function() {
    add(); // call on load more click
});

add(); // initial call for add first 20 items​

演示