Adding Container div Every Three Times a Loop Ends

Question

I'm writing a webpage in php to retrieve player details from a mySQL database and writing them to the body in divs, for instance:

<div class="infoDiv">
    <img style="margin: 10px; float:left" src="epoch.png>
    <p>Player Name: Kez</p>
    <p>Player ID: 98723947923749333432</p>
    <p>Player Morality: 0</p>
    <p>Gender: Male</p>
</div>

What I want to do is put three of these at a time into one div, so that when two more are retrieved from the database it would end the containing div and begin a new one for the next three like so:

<div class="container">
    <div class="infoDiv">
        <img style="margin: 10px; float:left" src="epoch.png>
        <p>Player Name: Kez</p>
        <p>Player ID: 98723947923749333432</p>
        <p>Player Morality: 0</p>
        <p>Gender: Male</p>
    </div>
    <div class="infoDiv">
        <img style="margin: 10px; float:left" src="epoch.png>
        <p>Player Name: Kez</p>
        <p>Player ID: 98723947923749333432</p>
        <p>Player Morality: 0</p>
        <p>Gender: Male</p>
    </div>
    <div class="infoDiv">
        <img style="margin: 10px; float:left" src="epoch.png>
        <p>Player Name: Kez</p>
        <p>Player ID: 98723947923749333432</p>
        <p>Player Morality: 0</p>
        <p>Gender: Male</p>
    </div>
</div>

. The php I'm using to write the data to the document is here:

$con = mysqli_connect($servername, $username, $password, $dbname);
$sql="SELECT PlayerName,PlayerUID,PlayerMorality,PlayerSex FROM player_data";

if ($result=mysqli_query($con,$sql)){
    while ($row=mysqli_fetch_row($result)){
        echo "<div class=\"infoDiv\">";
        echo "<img style=\"margin: 10px; float:left\" src=\"epoch.png\"/>";
        echo "<p>Player Name: " . $row[0] . "</p>";
        echo "<p>Player ID: " . $row[1] . "</p>";
        echo "<p>Player Morality: " . $row[2] . "</p>";
        if($row[3]=="0"){
            echo "<p>Gender: Male</p>";
        }
        else{
            echo "<p>Gender: Female</p>";
        }
        echo "</div><br>";
    }
mysqli_free_result($result);
}

I apologise in advance for this question, I know it was poorly worded, if you don't understand what I'm asking, feel free to ask. Thanks.

you are looking for modulus-opperator? php.net/manual/en/language.operators.arithmetic.php — donald123
– donald123, Commented Dec 22, 2014 at 14:33
No, I'm trying to split the output of the query result every three times. — I am a Terrible Programmer
– I am a Terrible Programmer, Commented Dec 22, 2014 at 14:35

Marc B · Accepted Answer · 2014-12-22 14:34:55Z

2

Just keep a counter:

$rows_output = 0;
while(... fetch from db ...) {
   if ($rows_output % 3 == 0) { 
      ... start a new container ...
   }
   ... output row data
   if ($rows_output % 3 == 2) {
      ... just output the 3rd row, end the container ...
   }
   $rows_output++;
}

answered Dec 22, 2014 at 14:34

Marc B

362k44 gold badges433 silver badges508 bronze badges

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

1 Comment

sjagr Over a year ago

The notable part of this answer for OP to understand is how the modulus (%) operator works. It's the calculation of a remainder for a division operation. 10 / 3 = 3, with a remainder of 1, which is addressed by 10 % 3 = 1. This is useful in programming (among other reasons) because when you do $rows_output % 3, you will always get 0, 1, or 2, for every 1st, 2nd, or 3rd row in each set of 3 rows (the remainder is never greater or equal to 3!)

gellu · Accepted Answer · 2014-12-22 14:39:02Z

The easiest solution would be to put some kind of index counter in your loop and when it can be divided by three you can close current div and begin new one:

$con = mysqli_connect($servername, $username, $password, $dbname);
$sql="SELECT PlayerName,PlayerUID,PlayerMorality,PlayerSex FROM player_data";
$resultIndex = 1;

if ($result=mysqli_query($con,$sql)){
    while ($row=mysqli_fetch_row($result)){
        echo "<div class=\"infoDiv\">";
        echo "<img style=\"margin: 10px; float:left\" src=\"epoch.png\"/>";
        echo "<p>Player Name: " . $row[0] . "</p>";
        echo "<p>Player ID: " . $row[1] . "</p>";
        echo "<p>Player Morality: " . $row[2] . "</p>";
        if($row[3]=="0"){
            echo "<p>Gender: Male</p>";
        }
        else{
            echo "<p>Gender: Female</p>";
        }
        echo "</div><br>";

        if ($resultIndex % 3 == 0) {
            echo "</div><div class=\"container\">";
        }

        $resultIndex++;
    }
    mysqli_free_result($result);
}

sjagr · Accepted Answer · 2014-12-22 15:02:52Z

0

You can use array_chunk($array , how many per each) and put that in a foreach loop like

foreach (array_chunk($array , 3) as $row)
{
   foreach ($row as $item)
        {
            the html goes here
        }
    // now 3 items has passed ,add something b4 the next 3
}

edited Dec 22, 2014 at 15:02

sjagr

16.6k5 gold badges43 silver badges69 bronze badges

answered Dec 22, 2014 at 14:59

ctf0

7,7155 gold badges39 silver badges49 bronze badges

Collectives™ on Stack Overflow

Adding Container div Every Three Times a Loop Ends

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related