Как сделать два isotope контейнера на странице?

Question

[Василь Бойко]

Как сделать два isotope контейнера на сайте?
Есть такой код

import $ from 'jquery';
var Isotope = require('isotope-layout');

$(document).ready(function() {
    var iso = new Isotope( '.js-grid', {
        itemSelector: '.js-grid-item',
        percentPosition: true,
        masonry: {
            columnWidth: '.js-grid-sizer'
        }
    });
});

но инициализируется только первый в dom дереве контейнер блок, нужно как-то через цикл прогнать не знаю, подскажите плс)

Нашёл такое решение:

var mainEl = $('.isotope-cat-list');
mainEl.isotope({
itemSelector: '.box',
transitionDuration: '0.3s',
masonry: {
     columnWidth: '.grid-sizer',
    gutter: 10
}
});

Но здесь по-другому как-то сделано

Comments

[Антон Литвиненко]

может просто сделать две инициализации?

[Василь Бойко]

Антон Литвиненко, нет, не просто)

Answer 1

[Василь Бойко]

import $ from 'jquery';
var Isotope = require('isotope-layout');

$(document).ready(function() {
    // isotope (masonry) grid
    if ($('.js-grid').length) {
        $('.js-grid').each(function (i) {
            var iso = new Isotope( this, {
                itemSelector: '.js-grid-item',
                percentPosition: true,
                masonry: {
                    columnWidth: '.js-grid-sizer'
                }
            });
        });
    }
});