0

xmlファイルからjQueryを介して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件が読み込まれて追加されます。

どうすればこれを達成できますか？

4

1 に答える 1

0

注：デモコードは、正しい方法を見つけるのに役立つ例を表しています。

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​

デモ

于 2012-05-12T16:54:45.347 に答える