在第5个div之后隐藏所有其他div

Question

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>

Answer 1

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');
});