Добавьте класс к каждому 4-му div в цикле

Question

Вот мой код:

<? for($x = 0; $x < count($groupSmall); $x++){ ?>
    <div class="col-md-3 meeting-item">
        <img src="images/image.jpg" />
    </div>
<? } ?>

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

Спасибо!!!

Answer 1

Почему бы просто не использовать nth-child(4n)? Пример JSFiddle.

<? for($x = 0; $x < count($groupSmall); $x++){ ?>
    <div class="col-md-3 meeting-item">
        <img src="images/image.jpg" />
    </div>
<? } ?>

...остается неизменной. И в вашем CSS:

div.meeting-item:nth-child(4n){
    background-color:#EEE;
}

Answer 2

<? for($x = 0; $x < count($groupSmall); $x++){ ?>
    <div class="col-md-3 meeting-item <?= $x % 4 === 0 ? 'my-class' : null ?>">
        <img src="images/image.jpg" />
    </div>
<? } ?>

PHP документация

Answer 3

Я не могу комментировать ответ Освальдо, потому что у меня пока нет репутации, но если вы просто замените "0" на 3, то вы получите класс, добавленный к 4-му и 8-м и т. Д.

<? for($x = 0; $x < count($groupSmall); $x++){ ?>
    <div class="col-md-3 meeting-item <?= $x % 4 === 3 ? 'my-class' : null ?>">
    <img src="images/image.jpg" />
</div>
<? } ?>

Answer 4

Вы не должны использовать PHP для такого рода вещей. Вот для чего CSS. Допустим, у вас есть контейнер и div внутри, контейнер divContainer, Итак, в CSS:

#divContainer div .meeting-item:nth-child(4n+4){
   //apply style.
 }