jQuery - 显示画廊的前三张图像；隐藏剩余部分

Question

我有一个带有以下标记的图像列表:

 <a href="#" id="toggle-16561" onclick="toggleImages(16561); return false;">show images</a>
 <div class='image-container-box clearfix' id='image-container-box-16561'>
      <span class='image-box'>
        <a href="/images/1.jpg"><img src="/images/1_thumb.jpg" /></a>
      </span>
      <span class='image-box'>
        <a href="/images/2.jpg"><img src="/images/2_thumb.jpg" /></a>
      </span>

      etc ....
    </div>
</div>

我可以在一个网页上放置很多这样的内容(比如 20 个或更多)。我最初不想显示任何拇指，因此将所有 .images-container-box 设置为隐藏。我希望显示前 3 张图像，隐藏其余图像。看来我想做的是在初始加载时隐藏元素的 img 数组中> 3 的所有 .image-container-box.image-box 。我该怎么做？

谢谢

Answer 1

$(".image-container-box .image-box:gt(2)").hide();

或者:

$(".image-container-box .image-box").slice(2).hide();

Demo.