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

Вот мой код:

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

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

Спасибо!!!


person user2957151    schedule 05.11.2013    source источник
comment
Если вы это знаете, попробуйте. Если не получится, покажите, что пробовали.   -  person akluth    schedule 05.11.2013
comment
Я не вижу признаков попытки модуля в вашем коде.   -  person geomagas    schedule 05.11.2013
comment
возможный дубликат модуля php в цикле   -  person jeroen    schedule 05.11.2013


Ответы (4)


<? 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

person Oswaldo Acauan    schedule 05.11.2013
comment
Привет Освальдо, спасибо за ваш ответ. Похоже, класс добавляется в первый div. Есть ли способ добавить его к 4-му, 8-му, 16-му и так далее? - person user2957151; 05.11.2013
comment
Измените $x % 4 === 0 на $x % 4 === 3 - person Mark Baker; 05.11.2013

Почему бы просто не использовать 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;
}
person Wayne Whitty    schedule 05.11.2013
comment
@jeroen Хотел написать 4n+4 :/ - person Wayne Whitty; 05.11.2013
comment
Не придираться, но это то же самое, что просто 4n ;-) - person jeroen; 05.11.2013
comment
@jeroen На самом деле этого не знал :) Спасибо за предупреждение. - person Wayne Whitty; 05.11.2013
comment
Думаю, я не хотел использовать css из-за всей проблемы с IE8. - person user2957151; 05.11.2013

Я не могу комментировать ответ Освальдо, потому что у меня еще нет репутации, но если вы просто замените «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>
<? } ?>
person Gareth Johnson    schedule 05.11.2013

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

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