jQuery charge les 3 premiers éléments, cliquez sur "charger plus" pour afficher les 5 éléments suivants

J'ai une liste non ordonnée:

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

Je souhaite remplir cette liste avec la liste d'éléments à partir d'un autre fichier 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>

Je veux charger les 3 premiers éléments de la liste, puis cliquez sur afficher les 5 éléments lorsque l'utilisateur clique sur "charger plus" 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();
    });
});

J'ai besoin d'aide si, comme je voudrais le "charger plus" pour afficher les 5 éléments de la liste, mais si il y a plus d'éléments de la liste dans le fichier HTML, pour afficher à nouveau le "charger plus" div et de permettre aux utilisateurs d'afficher les 5 éléments, la répétition jusqu'à ce que l'ensemble de la liste est affichée.

Comment puis-je employer?

J'ai créé le jsfiddle: http://jsfiddle.net/nFd7C/

source d'informationauteur JV10

  1. 33

    De Travail De Démonstration: 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();
    });
});

    Nouveau JS pour afficher ou masquer la charge plus et font preuve de moins de

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

    De Travail De Démonstration: http://jsfiddle.net/cse_tushar/6FzSb/2/

  2. 14

    Simple et avec peu de changements. Et aussi cacher charge plus lorsque l'ensemble de la liste est chargé.

    jsFiddle ici.

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