ajax - 一個文件中元素的增量加載

Question

我有一個index.html，裏面有一個容器，我想通過點擊加載ajax的內容。它看起來像這樣：

<div id="loadcontent"></div> 
<div id="more">Load More</div> 

你是唯一一個有很多的div的內容文件：它加載只是一個DIV

$(document).ready(function() { 
    var countItem = 0; 

    $('#more').click(function(){ 
     countItem ++; 
     $('<div/>').appendTo('#loadcontent').load('content.html #' + countItem) 
      .hide() 
      .fadeIn(1000); 
    }); 
}); 

現在：

<div id="1" class="content">One</div> 
<div id="2" class="content">Two</div> 
<div id="3" class="content">Three</div> 
<div id="4" class="content">Four</div> 
<div id="5" class="content">Five</div> 
<div id="6" class="content">Six</div> 
<div id="7" class="content">Seven</div> 
<div id="8" class="content">Eight</div> 
<div id="9" class="content">Nine</div> 
<div id="10" class="content">Ten</div> 
<div id="11" class="content">Eleven</div> 
<div id="12" class="content">Twelve</div> 

這裏是jQuery代碼當點擊加載更多按鈕時，導致它計算ID。

是否有可能使用ajax加載下三個或更多的div並將它們附加到已經加載的div上？如果是的話，我如何才能做到這一點？ 例如：第一次點擊：1-3，第二次點擊：1-6，第三次點擊：1-9等...

任何幫助將不勝感激。

UPDATE：

我不想加載內容一次，然後顯示它使用.show()或類似的東西。它應該是每次點擊的ajax請求。

Answer 1

如果您打算加載一個包含所有內容然後以部分方式顯示的文件，則無需爲每個部分提出請求，只需立即加載所有內容並在需要時顯示。

我做出了表率通過一個按鈕的點擊的內容部分顯示，參見工作示例here：

$(window).ready(function() { 
    var $contentContainer = $('.loadcontent'); 
    var lastShownIndex = 0; // id of latest shown div 
    var showPerClick = 3; 
    var elementsCount = 0; // total available elements count 

    // function to show elements with passed ids 
    var showElements = function(ids) { 
    ids.forEach(function(id) { 
     $contentContainer.find('#' + id).fadeIn(500); 
    }); 
    } 
    // function to generate array [start, start + 1, ..., end] 
    var range = function(start, end) { 
    return Array.apply(null, Array(end - start + 1)).map(function (_, i) { 
     return i + start; 
    }); 
    } 
    // function to generate array of unshown divs 
    var generateIds = function() { 
    if (lastShownIndex >= elementsCount) return []; 
    var ids = range(lastShownIndex + 1, Math.min(lastShownIndex + showPerClick, elementsCount)); 
    lastShownIndex += showPerClick; 
    return ids; 
    } 
    // load content into container 
    $contentContainer.load('content.html', function() { 
    elementsCount = $contentContainer.find('.content').length; 
    showElements(generateIds()); // show elements after page load 
    }); 
    // show items partially by clicking a button 
    $('#more').click(function() { 
    showElements(generateIds()); 
    if (lastShownIndex >= elementsCount) { // hide button when no elements are available 
     $(this).hide(); 
    } 
    }); 
}); 

Answer 2

我建議你只能讓一個請求，並存儲在一個變量請求承諾。使用slice()篩選新項目，以每次

$(function() { 
    var contentPromise = null, 
    itemsPerClick = 3, 
    startIndex = 0, 
    $moreButton = $('#more'); 

$moreButton.click(function() { 
    getContent() 
     .then(insertContent) 
     .fail(function() { 
     console.error("Failed request!") 
     }); 
    }); 

    function getContent() { 
    if (!contentPromise) { 
     // store request promise 
     contentPromise = $.get('content.html').then(function(resp) { 
     // return jQuery object that can easily be sliced 
     return $(resp).filter('div'); 
     }) 
    } 
    return contentPromise; 
    } 

    function insertContent($content) { 
    var endIndex = startIndex + itemsPerClick, 
     $newItems = $content.slice(startIndex, endIndex); 

    $('<div>').append($newItems) 
     .appendTo('#loadcontent') 
     .hide() 
     .fadeIn(1000); 

    // increment start 
    startIndex = endIndex; 
    // hide button when none left 
    if (startIndex >= $content.length) { 
     $moreButton.hide() 
    } 
    } 
}); 

Demo