Подсчёт количества блоков в контейнере и присваивание классов
Задача следующая: на сайте есть несколько контейнеров, в которых разное количество блоков и в зависимости от этого количества, необходимо проставить каждому блоку определенный класс. Поясню на примере.
Допустим у вас следующая разметка:
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="unit">Первый блок первого контейнера</div> <div class="unit">Второй блок первого контейнера</div> </div> <div class="container"> <div class="unit">Первый блок второго контейнера</div> <div class="unit">Второй блок второго контейнера</div> <div class="unit">Третий блок второго контейнера</div> </div> |
Как видно, в одинаковых контейнерах находится разное количество блоков: в первом — два, во втором — три. Если эти блоки добавились статически, например, в landing page, и добавляться в дальнейшем вряд ли что-то будет, то смысла в дальнейшем нет. Но если эти блоки добавляются динамически, например, добавляются новые товары с помощью CMS (в моем случае Drupal), тогда следующее решение может помочь в динамическом формировании макета.
Итак, задача такова: если количество блоков в контейнере кратно трем (3, 6, 9 и т.д.), то блоку нужно добавить класс «one-third» (в свое время данному классу задан стиль «width: 33.33333%»), и вывод будет примерно следующим:
Если же количество блоков, как в первом контейнере, не кратно трем, то блоку добавляем класс «one-second» (а данному классу пусть будет задан стиль «width: 50%»). В таком случае вывод будет таковым:
Конечно, классу «unit», по мимо всего прочего, нужно еще добавить свойство «float: left», чтобы получилось показанное выше, но это уже дело техники и знаний CSS. Мы же затеяли эту тему для написания скрипта, для динамического присваивания описанных классов. Для этого, в вашем файле js нужно добавить следующий код:
1 2 3 4 5 6 |
$(document).ready(function(){ $('.container').each(function() { var $units = $(this).find('.unit'); $units.addClass($units.length % 3 == 0 ? 'one-third' : 'one-second'); }); }); |
На этом, все.