Задача следующая: на сайте есть несколько контейнеров, в которых разное количество блоков и в зависимости от этого количества, необходимо проставить каждому блоку определенный класс. Поясню на примере.

Допустим у вас следующая разметка:

Как видно, в одинаковых контейнерах находится разное количество блоков: в первом — два, во втором — три. Если эти блоки добавились статически, например, в landing page, и добавляться в дальнейшем вряд ли что-то будет, то смысла в дальнейшем нет. Но если эти блоки добавляются динамически, например, добавляются новые товары с помощью CMS (в моем случае Drupal), тогда следующее решение может помочь в динамическом формировании макета.

Итак, задача такова: если количество блоков в контейнере кратно трем (3, 6, 9 и т.д.), то блоку нужно добавить класс «one-third» (в свое время данному классу задан стиль «width: 33.33333%»), и вывод будет примерно следующим:

one-third

 

Если же количество блоков, как в первом контейнере, не кратно трем, то блоку добавляем класс «one-second» (а данному классу пусть будет задан стиль «width: 50%»). В таком случае вывод будет таковым:

one-second

Конечно, классу «unit», по мимо всего прочего, нужно еще добавить свойство «float: left», чтобы получилось показанное выше, но это уже дело техники и знаний CSS. Мы же затеяли эту тему для написания скрипта, для динамического присваивания описанных классов. Для этого, в вашем файле js нужно добавить следующий код:

На этом, все.