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

Question

我试图在照片信息 5 之后隐藏 div。不确定下面的脚本是否正确执行。如果有人能给我任何指导，那就太好了。

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

您的脚本根据您提供的代码运行。

鉴于它们都是同级元素，您可以通过使用一般的同级组合器，~使用纯 CSS来做到这一点：

示例在这里

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

或者，您也可以使用.eq(4)（0基于索引）：

更新示例

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

您还可以使用:gt(4)：

更新示例

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

对于它的价值，您可能需要将 jQuery 包装在 DOM 就绪处理程序中：

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