jQuery ładuje pierwsze 3 elementy, kliknij „załaduj więcej”, aby wyświetlić kolejne 5 elementów
Mam nieuporządkowaną listę:
<ul id="myList"></ul>
<div id="loadMore">Load more</div>
Chcę wypełnić tę listę elementami 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 elementy listy, a następnie wyświetlić kolejne 5 elementów, gdy użytkownik kliknie div „załaduj więcej”:
$(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ę jednak pomocy, ponieważ chciałbym, aby „załaduj więcej” pokazywało kolejne 5 elementów listy, ale jeśli w pliku HTML znajduje się więcej elementów listy, ponownie wyświetl „div more” i pozwól użytkownikom wyświetlać następny 5 pozycji, powtarzając to aż do wyświetlenia całej listy.
Jak najlepiej to osiągnąć?
Stworzyłem następujące jsfiddle:http://jsfiddle.net/nFd7C/