jQuery carico primi 3 elementi, fare clic su "Carica di più" per visualizzare prossimi 5 elementi

Question

ho una lista non ordinata:

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

desidero compilare questa lista con voci di elenco da un altro file 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> 

voglio caricare i primi 3 voci di elenco, quindi mostrare i prossimi 5 oggetti quando l'utente fa clic sul "carico più" 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(); 
    }); 
}); 

Ho bisogno di aiuto anche se, come vorrei che "carichi di più" mostri i prossimi 5 elementi dell'elenco, ma se ci sono più elementi di elenco all'interno del file HTML, per visualizzare nuovamente il "carico di più" div e consentire agli utenti di visualizzare il i prossimi 5 articoli, ripetendo questo fino a quando non viene visualizzata l'intera lista.

Come posso ottenere il massimo?

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

Answer 1

lavoro Demo: 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 visualizzare o nascondere caricare di più e mostrare 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; 
} 

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

Answer 2

semplici e con piccoli cambiamenti. E anche nascondere più carico quando viene caricato l'intero elenco.

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