Carregar página aos poucos

[Gabe C. 0]

Gente, estou começando a trabalhar com javascript e travei numa parte do projeto.

 

Tenho uma estrutura mais ou menos assim:

<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<a href="#">Carregar mais</a>
</div>

As li estão com display: inline block.

 

O problema é que eu não estou conseguindo fazer funcionar esse "carregar mais". A intenção é ir carregando 4 li's de cada vez. Eu pensei em usar show e hide, mais não sei como determinar que a cada click apareçam 4.

[Flávio Douglas Nunes 5]

se você estiver usando jQuery pode facilitar bastante as coisas, mas se precisar fazer isso em js puro poderá seguir a mesma lógica;

 

Segue um exemplo simples usando jQuery:

 

HTML

<ul id="list">
    <li>01 (FIRST)</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18 (LAST)</li>
</ul>
<button id="maisItens">Mais</button>

JAVASCRIPT

var hideItemsAll = function(id) {
    jQuery("#"+id).find("li").hide();
}

var showItems = function(id, totalShow) {
    var items = jQuery("#"+id).find("li:hidden");
    items.each(function(key, item){
        jQuery(item).show();
        if((key+1) >= totalShow) {
            return false;
        }
    });
}

hideItemsAll('list');
showItems('list', 4);
jQuery("#maisItens").click(function() {
    showItems('list', 4);
});

[Gabe C. 0]

Nossa, muuuito obrigada, Flávio.

Salvou minha vida. hehe

:D :D :D

[Flávio Douglas Nunes 5]

Fico feliz em poder ajudar!

 

Bons estudos!