How can I alternate div elements in php foreach loop

Question

I have a set of arrays I'm getting back from the database, I'm using a php foreach loop to go through them. If I'm returning 5 arrays [1, 2, 3, 4, 5], each one containing a (time, status, location) I want to style all even arrays with a certain div and each odd ones with a different div. How would I do this?

I'm assuming I would use the loop with modulo operator.

for ($i = 1; $i <= $count; $i++)
    if ($i % 2 == 0) {

    } else {

    }
}

<?php foreach ($reservation as $seat) : ?>

If it is array 1, 3, 5.

 <div style="font-size:20px; background-color: #red; float:left;">
 <?php echo $seat['location']; ?>
 <?php echo $seat['time']; ?> 
 <?php echo $seat['status']; ?> </div>

If it is array 2, 4

<div style="font-size:20px; background-color: #blue; float:right;">
 <?php echo $seat['location']; ?>
 <?php echo $seat['time']; ?> 
 <?php echo $seat['status']; ?> </div>


<?php endforeach ?>

Bobby Jack · Accepted Answer · 2012-11-06 00:27:34Z

4

Looks reasonable, but:

background-color: #blue;

doesn't make sense. The '#' is used as a prefix for hexadecimal color values, whilst you have a color name, so you'd want:

background-color: blue;

or

background-color: #0000ff;

Also, are you aware that, in modern browsers (i.e. IE9+), alternately styled elements can be achieved solely via CSS3, e.g.

div:nth-child(odd) { background-color: blue; }

Check

edited Nov 6, 2012 at 0:27

answered Nov 6, 2012 at 0:06

Bobby Jack

16.1k15 gold badges70 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cbayram Over a year ago

+1, but do state that this is a CSS3 solution and not supported by some older browsers

strmstn · Accepted Answer · 2012-11-06 00:07:24Z

3

You do not have to use a foreach loop to enumerate all elements of an array:

for ($i=1; $i <= $count; $i++) {
    $seat = $reservation[$i-1];
    if ($i % 2 == 0) {
        // Do your 2 and 4
    } else {
        // Do your 1, 3 and 5
    }
}

I'd recommend setting CSS-classes "odd" and "even" to the divs and then style them in a separate file. If you want, you can also use CSS3 pseudo classes :nth-child(odd) and :nth-child(even).

answered Nov 6, 2012 at 0:07

strmstn

8726 silver badges11 bronze badges

2 Comments

cbayram Over a year ago

is there a reason why you insist on start $i at 1?

strmstn Over a year ago

My intension was to write the example similar to the OP's original code

ghoti · Accepted Answer · 2012-11-06 00:15:21Z

As long as you keep a counter, your modulo test can even be done in-line, within the foreach loop:

$ cat divloop.php 
<?php

$a=array( "one", "two", "three", "four", "five" );

$fmt="<div class='reservation %s'>%s</div>\n";

$count=0;

foreach ($a as $item) {
  printf($fmt, ++$count % 2 == 0 ? "even" : "odd", $item);
}

And the results:

$ php divloop.php 
<div class='reservation odd'>one</div>
<div class='reservation even'>two</div>
<div class='reservation odd'>three</div>
<div class='reservation even'>four</div>
<div class='reservation odd'>five</div>
$

At this point it's safer to use explicit classes rather than rely on browser functionality that may not be available across the board. At least everyone seems to understand basic CSS. :)

.reservation {
  font-size: 20px;
  float: left;
}

.even {
  background-color: #blue;
}

.odd {
  background-color: #red;
}

jarchuleta · Accepted Answer · 2012-11-06 00:08:53Z

1

what if you put the counter in the foreach.

$count = 0;
<?php foreach ($reservation as $seat) : ?>
if ($count % 2 == 0){
  //even div 
}else {
  // odd div
}
$count++;

<?php endforeach ?>

answered Nov 6, 2012 at 0:08

jarchuleta

1,2398 silver badges10 bronze badges

1 Comment

cbayram Over a year ago

as long as the array in question is sorted, yes

Collectives™ on Stack Overflow

How can I alternate div elements in php foreach loop

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related