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张图像，其余部分将被隐藏。似乎我想要做的是在初始加载时说出隐藏所有.image-container-box.image-box＆gt; 3在元素的img数组中。我该怎么做？

THX

Answer 1

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

或：

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

Demo.

Answer 2

这是jQuery的slice方法：

$(".images-container-box").slice(0,2).show();

$(".images-container-box").slice(3).hide();

使用slice比gt(n)，lt(n)或其他位置选择器效率更高，因为jQuery在评估gt, lt, etc..时会在整个集合中循环。

Answer 3

首先使用CSS隐藏它们（如果你还没有这样做）：

.image-container-box{display:none}

然后使用jQuery和:lt()选择器显示前三个：

$('.image-container-box:lt(3)').show();

Answer 4

CSS版本：

.image-box {display:none;}
.image-box:first-child, .image-box:nth-child(2), .image-box:nth-child(3) {display: block;}

jQuery - 显示画廊的前三个图像;隐藏其余部分

4 个答案: