Как скрывать блоки и выводить их количество на Jquery?

Question

[kot98]

Использую jQuery.
Есть враппер для картинок:

<div class="img-wrapper">
            <img src="..." alt="">
            <img src="..." alt="">
            <img src="..." alt="">
...
        </div>

Максимум должно выводиться 5 блоков. При количестве картинок больше чем 4, в пятый блок img-wrapper-а нужно выводить блок с числом картинок, которые не вошли. (Пример: если картинок 8, то выводим первые 4 блока img, а в пятый - белый квадрат с числом 4)

UPD: в комментариях, имеющийся код

Comments

[Stalker_RED]

То есть при пяти картинках нужно вывести 4 и белый квадрат с числом 1.
Шикарный алгоритм!

А сложность в чем? Посчитать количество вложенных элементов?
Добавить див с числом?

[kot98]

Stalker_RED, в зависимости от разрешения количество меняется

[Maksym Sahaidak]

kot98, Ну тогда тебе еще и нужно считать ширину экрана, и при определенной ширине менять это значение на нужное.
Например:

let numberImages = 4

if ( window.innerWidth < 960 ) numberImages = 3

[Stalker_RED]

kot98, более того, неплохо бы слушать событие resize, и пересчитывать при изменении.

[kot98]

Stalker_RED, Максим Сагайдак

const showImagesCount = function () {
        let maxImagesCount
        window.innerWidth < 780 ? maxImagesCount = 3 : maxImagesCount = 4
        $('.img-wrapper').each(function () {
          const imagesCount = $(this).find('.item-img').length
          if(imagesCount > maxImagesCount){
            maxImagesCount === 4 ? $(this).find('img').slice(3).remove() : $(this).find('img').slice(2).remove()
            $(this).append('<div class="white-block"><span>+' + (imagesCount - maxImagesCount + 1) + '</span></div>')
          }
        });
     }
     showImagesCount()

     $(window).resize(showImagesCount)

если вешать на ресайз, то соответственно он не отрабатывает при начальной загрузке, поэтому просто вызываю ее сразу же после инициализации. но при отрисовке страницы сначала выводятся все блоки, и через некоторое время функция срабатывает

при изменении размеров окна, значения пересчитываются, но выводится первоначальное. например при >780px вывелось +3, при <780 так же выводится +3, хотя должно быть другое значение и блоков img должно быть меньше

[Алексей Дубровин]

kot98,
Так вызовите эту функцию 1 раз, когда страница загрузится.