Question

我试图在照片信息后隐藏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

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

鉴于它们都是兄弟元素，你可以通过使用general sibling combinator, ~来使用纯CSS来做到这一点：

Example Here

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

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

Updated Example

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

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

Updated Example

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

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

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

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

1 个答案: