load jQuery pierwsze 3 elementy, kliknij „obciążenie więcej”, aby wyświetlić następne 5 elementów

Question

Mam nieuporządkowaną listę:

<ul id="myList"></ul> 
<div id="loadMore">Load more</div> 

życzę, aby wypełnić tę listę z elementów listy z innego pliku 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> 

Chcę załadować pierwsze 3 Wykaz przedmiotów, a następnie pokazać kolejne 5 pozycji, gdy użytkownik kliknie „załaduj więcej” div:

$(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(); 
    }); 
}); 

Potrzebuję pomocy, ponieważ chciałbym "załadować więcej", aby pokazać następne 5 elementów listy, ale jeśli w pliku HTML znajduje się więcej elementów listy, to ponownie wyświetl "div" więcej i pozwól użytkownikom wyświetlać następne 5 pozycji, powtarzając to, aż wyświetli się cała lista.

Jak najlepiej to osiągnąć?

Stworzyłem następujące jsfiddle: http://jsfiddle.net/nFd7C/

Answer 1

Demo robocza: 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(); 
    }); 
}); 

Nowy JS, aby pokazać lub ukryć załadować więcej i pokazać mniej

$(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; 
} 

Demo pracy: http://jsfiddle.net/cse_tushar/6FzSb/2/

Answer 2

Proste i mało zmian. A także ukryj ładunek więcej po załadowaniu całej listy.

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(); 
    }); 
});