加載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​ 

DEMO