I currently have a div with 8 children divs, but only want to display the first four. What's the easiest way to go about this with javascript or jQuery so that even if the children div's change, the last four divs will always be hidden or display: none?

<div class="wrapper">
  <div class="tour">Tour 1</div>
  <div class="tour">Tour 2</div>
  <div class="tour">Tour 3</div>
  <div class="tour">Tour 4</div>
  <div class="tour">Tour 5</div>
  <div class="tour">Tour 6</div>
  <div class="tour">Tour 7</div>
  <div class="tour">Tour 8</div>
</div>

I currently have a div with 8 children divs, but only want to display the first four. What's the easiest way to go about this with javascript or jQuery so that even if the children div's change, the last four divs will always be hidden or display: none?

<div class="wrapper">
  <div class="tour">Tour 1</div>
  <div class="tour">Tour 2</div>
  <div class="tour">Tour 3</div>
  <div class="tour">Tour 4</div>
  <div class="tour">Tour 5</div>
  <div class="tour">Tour 6</div>
  <div class="tour">Tour 7</div>
  <div class="tour">Tour 8</div>
</div>

• javascript
• jquery
• html

2 Answers 2

Using css, nth-child

.wrapper > :nth-child(n + 5) {
    display: none;
}

Demo: Fiddle

of jQuery use .slice() since it is faster than the alternate :lt

$('.wrapper > .tour').slice(4).hide()

Demo: Fiddle

Arun P Johny's answer is great, but in case you needed to do this using jQuery:

$('.wrapper .tour:gt(3)').hide();