Изотопная фильтрация - загрузка определенного числа из каждой категории при загрузке страницы

Question

У меня есть несколько элементов в каждой категории, но я хочу показать только первые 3 из каждой категории при загрузке, тогда при фильтрации она должна показать все, что категория. Я нашел number of posts об использовании «фильтра» в параметрах, чтобы загружать только одну категорию, но это не то, что я пытаюсь сделать. Я издевался над a codepen. Сейчас в каждой категории есть 4 элемента, но я хочу показывать только 3 из каждой загрузки.

Вот несколько вещей, которые я пробовал. 1. Я добавил отображение: ни ко всем элементам в CSS, а затем использовал lt(), чтобы выбрать первые 3 элемента из каждого класса, чтобы показать их при загрузке.

$('.webinar.item:lt(3), .video.item:lt(3), .printable.item:lt(3)').show(); 

Это нормально работало при загрузке, но при фильтрации все предметы исчезли, как только они были скрыты изначально. Изотоп не добавляет отображение: блок для фильтрованных элементов, поэтому CSS переопределяет и скрывает эти элементы после загрузки страницы. Я изменил файл Isotope, чтобы добавить дисплей: block; когда фильтры, но это действительно перепутало анимацию и вызвало много прыжков при фильтрации категорий.

2) То же, что и выше, но я установил непрозрачность 0 в CSS, использовал следующее, чтобы установить первые 3 элемента каждой категории, чтобы быть видимыми, но, как и ожидалось, были просто «пустые» блоки, в которых addt «Я был бы связан с изотопом.

$('.webinar.item:lt(3), .video.item:lt(3), .printable.item:lt(3)').css('opacity', '1');

Как уже упоминалось, я хотел бы показать только первые 3 пункта из каждой категории по нагрузке. Я ценю любую помощь.

Answer 1

Хорошо, мне просто нужно было напечатать все это, чтобы ответить на мой вопрос. :) Для тех, кто нашел эту тему и ищет что-то подобное, вот что я сделал.

Я использовал jQuery, чтобы скрыть все элементы, а не CSS, так что это произойдет только один раз.

Я спрятал все детали в моем списке

$('.isotope-list .item').hide(); 

Затем использовал лт(), чтобы показать первые 3 из каждой категории. Это позволило мне показать только 3 при загрузке и никак не испортить фильтрацию.

$('.webinar.item:lt(3), .video.item:lt(3), .printable.item:lt(3)').show();