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

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

• php
• javascript
• html

4 Answers 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

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 remend 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).

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

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