How to add a class to a specific element of PHP foreach loop?

Question

I have to add a specific class to my first, third and fifth element in a foreach loop in php ot thuis code below =>

<?php foreach($leaders as $l) : ?>
                    
                    <?php if(get_field('type', $l->ID) == 'NY Staff') : ?>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                      <div class="member-info">
                        <div class="photo">
                          <img  class="img-responsive" src="<?php the_field('image', $l->ID); ?>" alt="">
                        </div>
                        <div class="info">
                          <div class="name"><?php echo get_the_title($l->ID); ?></div>
                          <div class="body">
                            <div><span class="job-name"><?php the_field('position', $l->ID); ?>,</span> based in <?php the_field('location', $l->ID); ?></div>
                            <a href="<?php echo get_permalink($l->ID); ?>" class="read-more">
                              <svg id="_24x24"  data-name="24x24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#FFFFFF;}</style></defs><path id="icon-arrow-right" class="cls-1" d="M12.46 12L6 19l2.77 3L18 12 8.77 2 6 5l6.46 7z"/></svg>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <?php endif; ?>
                
                <?php endforeach; ?>

So i have to add this class in the img element below the div=>photo to the code below=>

<div class="photo">
                          <img  class="img-responsive" src="<?php the_field('image', $l->ID); ?>" alt="">
                        </div>

Thank you in advance! cheers

What is `$leaders`? An indexed array or associative? Do you only need 1, 3 and 5 or all odd-numbered indexes? — Phil, Mar 17 '23 at 05:48
Hi Phil, its an idexed array. Yes i need only 1,3 and 5. I added the css solutions and it s works. But to improve my knowledge, I would like to know how fix it with PHP. Can you help me? thank you in advance — Rafa971, Mar 18 '23 at 07:37
You can get the index of the loop by doing the following `foreach($leaders as $index=>$l)` and then check the value of $index. Other ideas can be found here: https://stackoverflow.com/questions/141108/how-to-find-the-foreach-index — Shawn Northrop, Mar 18 '23 at 17:56

score 2 · Answer 1 · edited Mar 17 '23 at 05:27

You could possibly use the nth-child css selector and avoid adding the class, depending on your needs.

For example:

div.col-lg-4:nth-child(odd) .photo img { … }

Or

div.col-lg-4:nth-child(3) .photo img,   
div.col-lg-4:nth-child(5) .photo img { … }

https://css-tricks.com/almanac/selectors/n/nth-child/

You may want to add a class to the parent div to be more explicit if you take this approach. i.e.

<div class="container col-lg-4 …">

.container:nth-child(…)

How to add a class to a specific element of PHP foreach loop?

1 Answers1