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