2

Estou precisando exibir um determinado número de elementos do HTML.

Por exemplo:

<div class="conteudo">
 <p>Primeiro parágrafo</p>
 <p>Segundo parágrafo</p>
 <p>Terceiro parágrafo</p>
</div>

Eu queria exibir somente o primeiro parágrafo dessa div.

Qual seria a melhor forma de fazer isso com javascript?

3 Respostas 3

4

Podes fazer isso com JavaScript e um seletor CSS assim:

document.querySelector('.conteudo p').style.display = 'block';
.conteudo p {
  display: none;
}
<div class="conteudo">
 <p>Primeiro parágrafo</p>
 <p>Segundo parágrafo</p>
 <p>Terceiro parágrafo</p>
</div>

Outra maneira seria somente com CSS assim:

.conteudo p {
  display: none;
}
.conteudo p:first-child {
  display: block;
}
<div class="conteudo">
 <p>Primeiro parágrafo</p>
 <p>Segundo parágrafo</p>
 <p>Terceiro parágrafo</p>
</div>

A segunda alternativa pode ser a melhor visto evitar FOUC, caso seja alternativa usar só CSS.

A terceira alternativa, só mesmo com JavaScript poderia ser assim:

var els = document.querySelectorAll('.conteudo p');
for (var i = 0; i < els.length; i++) {
  els[i].style.display = i == 0 ? 'block' : 'none';
}
<div class="conteudo">
  <p>Primeiro parágrafo</p>
  <p>Segundo parágrafo</p>
  <p>Terceiro parágrafo</p>
</div>

2
  • Valeu Sergio, sua solução é muito boa e útil. Obrigado pela ajuda 27/01/2017 às 16:14
  • Tem como simular um FOUC... forçar o carregamento primeiro de imagens por exemplo ?
    – MagicHat
    27/01/2017 às 16:18
2

Podes fazer assim, usando o selector gt (greater than) , e todos os p com index superior a 0, neste caso, ficam com display: none (hide()):

$('p:gt(0)').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conteudo">
 <p>Primeiro parágrafo</p>
 <p>Segundo parágrafo</p>
 <p>Terceiro parágrafo</p>
</div>

Com javascript Nativo:

const ps = document.getElementsByTagName('p');
for(var i = 1; i < ps.length; i++) {
 ps[i].style.display = 'none'; 
}
<div class="conteudo">
 <p>Primeiro parágrafo</p>
 <p>Segundo parágrafo</p>
 <p>Terceiro parágrafo</p>
</div>

2
  • Obrigado Miguel, sua primeira solução me ajudou e muito. Meio que posso passar um valor como se fosse uma posição de array, eu testei retornando com o primeiro e segundo parágrafo, passando o valor 1 dentro do p:gt() 27/01/2017 às 16:13
  • @RafaelS.Oiveira , de nada, mas atenção gt(...) vai selecionar todos elementos cujo index (começando em 0) seja maior do que aquele que queres. Caso queiras desaparecer só com um elemento fazes com eq(...) . E para complementar caso queiras os elementos cujo index seja inferior podes usar lt(...)
    – Miguel
    27/01/2017 às 16:16
0

Um jeito diferente dos que já foram postados, com jquery:

$('.conteudo p:first').css({
  color: 'red'  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conteudo">
 <p>Primeiro parágrafo</p>
 <p>Segundo parágrafo</p>
 <p>Terceiro parágrafo</p>
</div>

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 .