Счетчик блоков на jquery?

Question

[Breeze1]

Ребят, помогите скрипт закончить.
По клику на кнопку подгружаются блоки, по 4 штуки.

https://codepen.io/brezze/pen/MqRBpB

Нужно сделать счетчик который находится в левом углу. Первое число показывает сколько сейчас блоков открыто, последнее, сколько всего блоков в контейнере. Нужно сделать так, чтобы это все через js записывалось. Если например мы кликаем по кнопке и открываем новые 4 блока, в счетчик должно это записаться и значение меняется с 4 на 8 например. А в последнее число нужно через js чтобы считывалось число всех блоки которые в контейнере.

Answer 1

[0xD34F]

<div class="counter">
  <span class="counter__visible"></span> /
  <span class="counter__total"></span>
</div>

$('.loadmore').on('click', function(e) {
  e.preventDefault();

  const $items = $('.item');

  $items.filter(':hidden').slice(0, 4).fadeIn();

  const visible = $items.filter(':visible').length;

  $('.counter__visible').text(visible);
  $('.counter__total').text($items.length);

  if ($items.length === visible) {
    $(this).fadeOut('slow');
  }
}).click();

Comments

[Breeze1]

Супер. спасибо

[Breeze1]

Подскажите пожалуйста, а если таких блоков на сайте будет несколько, и в каждом будет подгружаться разное количество блоков, где-то 4, где-то 10. Делать для каждой странице свой скрипт ? или есть какое-то более универсальное решение ?

[0xD34F]

Breeze1, что мешает передавать в функцию кроме количества ещё и идентификатор блока?