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 изображения были показаны, а остальные были скрыты. Кажется, что я хочу сделать, это сказать при начальной загрузке скрыть все .image-container-box.image-box, которые> 3 в массиве img элемента. Как бы я это сделал?

ТНХ

Answer 1

Это метод jQuery ломтик :

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

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

Использование slice более эффективно, чем gt(n), lt(n) или другие позиционные селекторы, потому что jQuery почему-то перебирает весь набор при эваляции gt, lt, etc...

Answer 2

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

или

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

Демо-версия.

Answer 3

CSS версия:

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

Answer 4

Сначала скройте их, используя CSS (если вы еще этого не сделали):

.image-container-box{display:none}

Затем покажите первые три, используя jQuery и селектор :lt():

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