Add a class to every 4th div in loop

Question

Here is my code:

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

I would like to add a new class to every 4th div in this loop. I know it can be done with Modulus but I can't get it to work.

Thanks!!!

If you know it, try it. If it does not work, show what you've tried. — akluth, Nov 05 '13 at 16:37
possible duplicate of [php modulus in a loop](http://stackoverflow.com/questions/8135404/php-modulus-in-a-loop) — jeroen, Nov 05 '13 at 16:42

score 2 · Answer 1 · answered Nov 05 '13 at 16:39

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 documentation

answered Nov 05 '13 at 16:39

Oswaldo Acauan

2,730
15
23

Hi Oswaldo, thank you for your reply. It looks like the class is being added to the first div. Is there a way for it to be added to the 4th, 8th, 16th, and so on? – user2957151 Nov 05 '13 at 16:43
1

Change the `$x % 4 === 0` to `$x % 4 === 3` – Mark Baker Nov 05 '13 at 17:02

Wayne Whitty · Answer 2 · 2013-11-05T16:47:11.647

2

Why not just use nth-child(4n)? JSFiddle example.

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

...remains unchanged. And in your CSS:

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

edited Nov 05 '13 at 16:47

answered Nov 05 '13 at 16:42

Wayne Whitty

19,513
7
44
66

@jeroen Meant to write 4n+4 :/ – Wayne Whitty Nov 05 '13 at 16:47
Not to nitpick, but that's the same as just `4n` ;-) – jeroen Nov 05 '13 at 16:49
1

@jeroen Didn't actually know that :) Thanks for the heads up. – Wayne Whitty Nov 05 '13 at 16:50
I guess I didn't want to use css due the whole IE8 issue – user2957151 Nov 05 '13 at 16:54

score 1 · Answer 3 · answered Nov 05 '13 at 16:57

I can't comment on Oswaldo's answer because I don't have the reputation yet, but if you just replace the "0" by a 3, as so, you'll get the class added to the 4th 8th etc.

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

score 0 · Answer 4 · answered Nov 05 '13 at 16:44

0

You souldn't use PHP for this kind of stuff. That's what CSS is for. Let's say you have a container and the divs inside, the container is divContainer. So, in CSS:

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

answered Nov 05 '13 at 16:44

danielrozo

1,442
1
10
22

Add a class to every 4th div in loop

4 Answers4