jQuery的負載前3個元素，單擊「加載更多」，顯示未來5元

Question

我有一個無序列表：

​​

我願在此列表中與來自另一個HTML文件列表中的項目：

<li>One</li> 
<li>Two</li> 
<li>Three</li> 
<li>Four</li> 
<li>Five</li> 
<li>Six</li> 
<li>Seven</li> 
<li>Eight</li> 
<li>Nine</li> 
<li>Ten</li> 
<li>Eleven</li> 
<li>Twelve</li> 
<li>Thirteen</li> 
<li>Fourteen</li> 
<li>Fifteen</li> 

我要加載的第一個3個列表項，然後顯示，未來5項，當用戶點擊「加載更多」分區：

$(document).ready(function() { 
    // Load the first 3 list items from another HTML file 
    //$('#myList').load('externalList.html li:lt(3)'); 
    $('#myList li:lt(3)').show(); 
    $('#loadMore').click(function() { 
     $('#myList li:lt(10)').show(); 
    }); 
    $('#showLess').click(function() { 
     $('#myList li').not(':lt(3)').hide(); 
    }); 
}); 

儘管我需要幫助，因爲我希望「加載更多」來顯示接下來的5個列表項，但是如果HTML文件中有更多列表項，要再次顯示「加載更多」div並允許用戶顯示接下來的5個項目，重複此操作直到顯示整個列表。

我該如何做到最好？

我創建了以下的jsfiddle：http://jsfiddle.net/nFd7C/

Answer 1

工作演示：http://jsfiddle.net/cse_tushar/6FzSb/

$(document).ready(function() { 
    size_li = $("#myList li").size(); 
    x=3; 
    $('#myList li:lt('+x+')').show(); 
    $('#loadMore').click(function() { 
     x= (x+5 <= size_li) ? x+5 : size_li; 
     $('#myList li:lt('+x+')').show(); 
    }); 
    $('#showLess').click(function() { 
     x=(x-5<0) ? 3 : x-5; 
     $('#myList li').not(':lt('+x+')').hide(); 
    }); 
}); 

新的JS顯示或隱藏加載越來越顯示出少

$(document).ready(function() { 
    size_li = $("#myList li").size(); 
    x=3; 
    $('#myList li:lt('+x+')').show(); 
    $('#loadMore').click(function() { 
     x= (x+5 <= size_li) ? x+5 : size_li; 
     $('#myList li:lt('+x+')').show(); 
     $('#showLess').show(); 
     if(x == size_li){ 
      $('#loadMore').hide(); 
     } 
    }); 
    $('#showLess').click(function() { 
     x=(x-5<0) ? 3 : x-5; 
     $('#myList li').not(':lt('+x+')').hide(); 
     $('#loadMore').show(); 
     $('#showLess').show(); 
     if(x == 3){ 
      $('#showLess').hide(); 
     } 
    }); 
}); 

CSS

#showLess { 
    color:red; 
    cursor:pointer; 
    display:none; 
} 

工作演示：http://jsfiddle.net/cse_tushar/6FzSb/2/

Answer 2

簡單，幾乎沒有變化。並且在整個列表加載時也隱藏加載。

jsFiddle here。

$(document).ready(function() { 
    // Load the first 3 list items from another HTML file 
    //$('#myList').load('externalList.html li:lt(3)'); 
    $('#myList li:lt(3)').show(); 
    $('#showLess').hide(); 
    var items = 25; 
    var shown = 3; 
    $('#loadMore').click(function() { 
     $('#showLess').show(); 
     shown = $('#myList li:visible').size()+5; 
     if(shown< items) {$('#myList li:lt('+shown+')').show();} 
     else {$('#myList li:lt('+items+')').show(); 
      $('#loadMore').hide(); 
      } 
    }); 
    $('#showLess').click(function() { 
     $('#myList li').not(':lt(3)').hide(); 
    }); 
});