Count elements and display an amount

Question

Count elements and display an amount

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (0 votes)

1

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

asked by anonymous 27.01.2017 / 16:49

3 answers

3

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 just with CSS like this:

.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 an alternative to use CSS only.

The third alternative, even with JavaScript might look 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>

27.01.2017 / 16:55

0

A different way than those 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><divclass="conteudo">
 <p>Primeiro parágrafo</p>
 <p>Segundo parágrafo</p>
 <p>Terceiro parágrafo</p>
</div>

27.01.2017 / 17:01

How to add class in jQuery to a given element? Expanding an image with hover without the other elements moving

score 1 · Accepted Answer

You can do this by using the gt (greater than) selector, and all p with index greater than 0 , in this case, get display: none ( hide() ):

$('p:gt(0)').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="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>