0

Me bateu uma dúvida recentemente, pelo qual devo manipular um certo número de elementos escondido através do display:none; que esta definido sobre o span que envolve todos eles.

Exemplo

<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>

Para isso, será necessário apenas mostrar dentro do id resultado cada 5 elemento escondido.

A cada clique mais 5 elementos ocultos no documento HTML, torna-se visível na id resultado.

Veja como deve ficar:

Então com enfoque nisto de que jeito posso realizar isto?

3
  • 1
    Não entendi muito bem, esse span oculto é seu "banco de dados" ? cada vez que clica você quer pegar 5 linhas do "banco de dados " e jogar em resultados ? 16/02/2017 às 19:12
  • @Washingtondacosta Como que não entendeu?! Você explicou corretamente o que pretendo. 16/02/2017 às 19:15
  • só estava querendo confirmar se entendi certo, já que nunca vi um "banco de dados" dessa forma. Não adianta alguem te propor uma resposta buscando pelas tags e depois você dizer que vai buscar de um banco de dados via ajax (que seria o correto na minha opinião) 16/02/2017 às 19:22

1 Resposta 1

2

sugiro uma pequena alteração no "banco de dados" que irá facilitar bastante o entendimento do código. Se for possível, agrupe os links em divs como abaixo:

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-->

vê se atende sua necessidade

se quiser permanecer com sua estrutura o código é esse:

<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>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .