CODEWITHSUNDEEP
javascriptjquery
Erasersharp
Erasersharp

Reputation: 368

Hide all other divs after the 5th div

I am trying to hide the divs after photo info 5. Not sure if the script below is executing it correctly or not. If anyone could give me any guidance that would be great.

jQuery

$( ":nth-of-type(5)" ).nextAll( ".photo-info" ).addClass( "hidden" );

HTML

<div class="photo-info">1</div>
<div class="photo-info">2</div>
<div class="photo-info">3</div>
<div class="photo-info">4</div>
<div class="photo-info">5</div>
<div class="photo-info">6</div>
<div class="photo-info">7</div>

Upvotes: 1

Views: 1906

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241008

Your script is working based on the code you provided.

Given that they are all sibling elements, you could do this with pure CSS by making use of the general sibling combinator, ~:

Example Here

.photo-info:nth-of-type(5) ~ .photo-info {
    display: none;
}

Alternatively, you could also use .eq(4) (0 index based):

Updated Example

$('.photo-info').eq(4).nextAll('.photo-info').addClass('hidden');

You could also use :gt(4):

Updated Example

$('.photo-info:gt(4)').addClass('hidden');

For what it's worth, you may need to wrap your jQuery in a DOM ready handler:

$(document).ready(function () {
    $('.photo-info:gt(4)').addClass('hidden');
});

Upvotes: 6

Related Questions