Count elements and display a quantity

Asked

Viewed 1,216 times

2

I need to display a certain number of HTML elements.

For example:

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

I wanted to display only the first paragraph of this div.

What would be the best way to do this with javascript?

javascript jquery html

3 answers

4

You can do this with Javascript and a CSS selector like this:

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>

Another way would be only with CSS so:

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

The second alternative may be the best seen avoid FOUC, if it is alternative to use CSS only.

The third alternative, only even with Javascript could be like this:

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>

  • Thanks Sergio, your solution is very good and useful. Thanks for the help

  • It has how to simulate an FOUC... force the loading of images first for example ?

2


You can do it like this, using the selector gt (Greater than) , and all p s with an index higher than 0, in this case, you have 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>

With Native Javascript:

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>

  • Thank you Miguel, your first solution helped me a lot. I mean I can pass a value like an array position, I tested it by returning with the first and second paragraph, passing the value 1 inside p:gt()

  • @Rafaels.Oiveira , anything but attention gt(...) will select all elements whose index (starting at 0) is larger than the one you want. If you want to disappear with only one element you make with eq(...) . And to complement if you want the elements whose index is lower you can use lt(...)

0

A different way than the ones already posted, with 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>

Browser other questions tagged javascript jquery html

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