jQuery carica i primi 3 elementi, fai clic su “carica altro” per visualizzare i prossimi 5 elementi

Ho una lista non ordinata:

    Load more

    Desidero popolare questa lista con gli elementi della lista da un altro file HTML:

     
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine
  • Ten
  • Eleven
  • Twelve
  • Thirteen
  • Fourteen
  • Fifteen
  • Voglio caricare i primi 3 elementi dell’elenco, quindi mostrare i prossimi 5 elementi quando l’utente fa clic sul div “load more”:

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

    Ho bisogno di aiuto, perché vorrei che “carica di più” mostri i prossimi 5 elementi della lista, ma se ci sono più voci di elenco all’interno del file HTML, per visualizzare di nuovo il div “carica più” e consentire agli utenti di visualizzare il successivo 5 articoli, ripetendo questo fino a quando viene visualizzato l’intero elenco.

    Come posso ottenere il massimo?

    Ho creato il seguente jsfiddle: http://jsfiddle.net/nFd7C/

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

    Nuovo JS per mostrare o hide più carico e mostrare di meno

     $(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 di lavoro: http://jsfiddle.net/cse_tushar/6FzSb/2/

    Semplice e con pochi cambiamenti. E anche hide più carico quando viene caricato l’intero elenco.

    jsFiddle qui .

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