How to show 5 in 5 hidden elements?

Asked

Viewed 156 times

0

I was struck by a doubt recently, by which I must manipulate a certain number of elements hidden through the display:none; that it is defined on the span that involves all of them.

Example

<html>

<head>

<script>
    var linhas = 25;

function mostrarGrupo() {

    for( var i = linhas; i < linhas + 5; i++) {

        document.getElementById('resultado').innerHTML += i + '<br>'

    }

}
</script>

</head>

</body>

    <input type="button" value="mais" onclick="mostrarGrupo()"/>

<br><br>

    <div id="resultado"> &nbsp; </div>
   
<span id="dados" style="display:none">

// Primeiro Grupo

<hr id='linha1'> 
<hr id='linha2'> 
<hr id='linha3'> 
<hr id='linha4'> 
<hr id='linha5'> 

// Segundo Grupo

<hr id='linha6'> 
<hr id='linha7'> 
<hr id='linha8'> 
<hr id='linha9'> 
<hr id='linha10'> 

// Terceiro Grupo

<hr id='linha11'> 
<hr id='linha12'> 
<hr id='linha13'> 
<hr id='linha14'> 
<hr id='linha15'> 

// Quarto Grupo

<hr id='linha16'> 
<hr id='linha17'> 
<hr id='linha18'> 
<hr id='linha19'> 
<hr id='linha20'> 

// Quinto Grupo

<hr id='linha21'> 
<hr id='linha22'> 
<hr id='linha23'> 
<hr id='linha24'> 
<hr id='linha25'> 

</span>

</body>

</html>

For this, it will only be necessary to show inside the id resultado each 5 hidden element.

Every click 5 more hidden elements in the HTML document, it becomes visible in the id resultado.

See how it should look:

So focus on this how I can accomplish this?

javascript css loop for
  • 1

    I don’t quite understand, is this hidden span your "database"? each time you click you want to pick up 5 rows of "database " and play in results ?

  • @Washingtondacosta How did you not understand?! You explained correctly what I intend to do.

  • I was just trying to make sure I got it right, since I’ve never seen a "database" like that. It is no use someone to propose an answer by searching for the tags and then you say you will search from a database via ajax (which would be correct in my opinion)

1 answer

2


I suggest a small change in the "database" that will greatly facilitate the understanding of the code. If possible, group the links in Divs as below:

var totalGrupos = 5;
var grupo = 1;

function mostrarGrupo() {
  if (grupo <= totalGrupos) {
    document.getElementById('resultado').innerHTML += document.getElementById('grupo' + grupo).innerHTML;
    grupo++;
  }
}
a {
  display: block;
}
<input type="button" value="mais" onclick="mostrarGrupo()" />
<br><br>
<div id="resultado"> &nbsp; </div>

<!--INICIO DO BANCO DE DADOS-->

<span id="dados" style="display:none">
    
    // Primeiro Grupo
    <div id="grupo1">
      <a href="">linha1</a> 
      <a href="">linha2</a>
      <a href="">linha3</a>
      <a href="">linha4</a>
      <a href="">linha5</a> 
    </div>
    // Segundo Grupo
    <div id="grupo2">
      <a href="">linha6</a> 
      <a href="">linha7</a>
      <a href="">linha8</a>
      <a href="">linha9</a>
      <a href="">linha10</a>  
    </div>
    // Terceiro Grupo
    <div id="grupo3">
      <a href="">linha11</a> 
      <a href="">linha12</a>
      <a href="">linha13</a>
      <a href="">linha14</a>
      <a href="">linha15</a> 
    </div>
    // Quarto Grupo
    <div id="grupo4">
      <a href="">linha16</a> 
      <a href="">linha17</a>
      <a href="">linha18</a>
      <a href="">linha19</a>
      <a href="">linha20</a> 
    </div>
    // Quinto Grupo
    <div id="grupo5">
      <a href="">linha21</a> 
      <a href="">linha22</a>
      <a href="">linha23</a>
      <a href="">linha24</a>
      <a href="">linha25</a> 
    </div>
    </span>
<!--FIM DO BANCO DE DADOS-->

see if it meets your need

if you want to stay with your structure the code is this:

<html>
<head>
    <style type="text/css">
    a{
        display: block;
    }
    </style>
    <script>
        var totalGrupos = 5;
        var grupo = 1;

  function mostrarGrupo() {
      if(grupo<=totalGrupos){
          var inicio = (grupo - 1) * 5 +1;
          for(x=inicio;x<inicio+5;x++){
                document.getElementById('resultado').appendChild(document.getElementById('linha' + x));
          }
          grupo ++;
      }
  }
</script>
</head>

<body>
    <input type="button" value="mais" onclick="mostrarGrupo()" />
    <br><br>
    <div id="resultado"> &nbsp; </div>

    <!--INICIO DO BANCO DE DADOS-->

    <span id="dados" style="display:none">

// Primeiro Grupo
  <a href="" id='linha1'>linha1</a> 
  <a href="" id='linha2'>linha2</a>
  <a href="" id='linha3'>linha3</a>
  <a href="" id='linha4'>linha4</a>
  <a href="" id='linha5'>linha5</a> 

// Segundo Grupo
  <a href="" id='linha6'>linha6</a> 
  <a href="" id='linha7'>linha7</a>
  <a href="" id='linha8'>linha8</a>
  <a href="" id='linha9'>linha9</a>
  <a href="" id='linha10'>linha10</a>  

// Terceiro Grupo
  <a href="" id='linha11'>linha11</a> 
  <a href="" id='linha12'>linha12</a>
  <a href="" id='linha13'>linha13</a>
  <a href="" id='linha14'>linha14</a>
  <a href="" id='linha15'>linha15</a> 
</div>
// Quarto Grupo
  <a href="" id='linha16'>linha16</a> 
  <a href="" id='linha17'>linha17</a>
  <a href="" id='linha18'>linha18</a>
  <a href="" id='linha19'>linha19</a>
  <a href="" id='linha20'>linha20</a> 

// Quinto Grupo
  <a href="" id='linha21'>linha21</a> 
  <a href="" id='linha22'>linha22</a>
  <a href="" id='linha23'>linha23</a>
  <a href="" id='linha24'>linha24</a>
  <a href="" id='linha25'>linha25</a> 

</span>
    <!--FIM DO BANCO DE DADOS-->
</body>
</html>
</html>

Browser other questions tagged javascript css loop for

You are not signed in. Login or sign up in order to post.