Load button more using list (li) [duplicate]

Navigation
0

Well, I need some help. I have a list in the following structure. 

<ul>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
</ul>
<a href="#">Carregar Mais</a>

Initially only 10 elements should be displayed, the rest should be hidden, when you click the load button more, it will load 10 more until you have nothing else to show.

I tried to do this using .length in jQuery, I got it to tell that I have 30 li's, but when I try to hide it, it gives a display: none in all elements.

    
asked by anonymous 16.01.2017 / 17:32

2 answers

5

You can do this: 

const load_num = 10;
var times_loaded = 1;
$('li:gt(' +(load_num-1)+ ')').hide(); // esconder as li cujo index >= 10
$('#load_more').on('click', function() {
  times_loaded += 1;
  $('li:lt(' +(load_num*times_loaded)+ ')').show(); // fazer aparerer as li cujo index seja menor que 10*x (load_num*times_loaded)
  console.log('Carregadas mais ' +load_num+ ', Total Carregadas: ' +$('li:visible').length);
});
button {
 margin-bottom: 60px;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li><li>TESTE</li></ul><buttonid="load_more">Carregar mais 10</button>
    
16.01.2017 / 18:23
2

There are several ways you can get what you want, one of which is this:

First we will set the value that will begin to display (for an easier explanation, I put 5 instead of 10). This value is in var count = 5; .

To start, we'll use .slice () to select the elements we want to hide.

After this, we'll use the .click () event to load more elements. For example, I just add the value of count with 5 count += 5; . and loop all items smaller than this value, showing them with .show () .

I think you'll understand better in the example below: 

(function($) {
  //Setamos o valor inicial
  var count = 5;

  //escondemos todos os elementos maior que o valor inicial
  $("li").slice(count).hide();

  $('#carrega-mais').click(function() {

    //Somamos a quantidade nova a ser exibida
    count += 5;

    //Rodamos o loop no valor total
    for (var i = 0; i < count; i++) {
      //Mostramos o item
      $('li').eq(i).show();
    }
  });

}(jQuery));
button {
  margin-bottom: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li>TESTE1</li><li>TESTE2</li><li>TESTE3</li><li>TESTE4</li><li>TESTE5</li><li>TESTE6</li><li>TESTE7</li><li>TESTE8</li><li>TESTE9</li><li>TESTE10</li><li>TESTE11</li><buttonid="carrega-mais">Carregar mais 5</button>

Ideally, count the amount of li to hide the load more button when you do not have any more elements, but I'll leave it to you to complement. xD

    
16.01.2017 / 20:53
Adding html with jquery How to remove accent values in MySQL