I’ve a problem I need to solve. I’ve this HTML layout here in PHP:
JavaScript
x
<div class="container">
<div class="wrapper">
<span class="entry"></span>
<span class="entry"></span>
</div>
<div class="wrapper">
<span class="entry"></span>
<span class="entry"></span>
</div>
<div class="wrapper">
<span class="entry"></span>
<span class="entry"></span>
</div>
<div class="wrapper">
<span class="entry"></span>
<span class="entry"></span>
</div>
</div>
I have a column layout here. This means that I always want to pack 2 elements into a wrapper class. I get all my elements from an array, which I want to output with a loop. I had the idea to output the wrapper only every 2nd pass, but this results in the following output:
JavaScript
<div class="wrapper">
<div class="wrapper">
<span class="entry"></span>
</div>
<span class="entry"></span>
<div class="wrapper">
<span class="entry"></span>
</div>
<span class="entry"></span>
<div class="wrapper">
<span class="entry"></span>
</div>
<span class="entry"></span>
<div class="wrapper">
<span class="entry"></span>
</div>
<span class="entry"></span>
</div>
That’s my code:
JavaScript
<div class="container">
<?php
$loop_count = 0;
foreach ( $array as $item ) {
if ( $loop_count % 2 === 0 ) { ?>
<div class="wrapper">
<?php } ?>
<span class="entry"><?= $item ?></span>
<?php if ( $loop_count % 2 === 0 ) { ?>
</div>
<?php }
$loop_count++;
} ?>
</div>
My expected output in an image:
Advertisement
Answer
Your code will be a little complicated:
JavaScript
<?php
$array = [1,2,3];?>
<div class="container">
<?php
$loop_count = 0;
foreach ( $array as $item ) {
// here you open `div.wrapper`
if ( $loop_count % 2 === 0 ) { ?>
<div class="wrapper">
<?php } ?>
<span class="entry"><?= $item ?></span>
<?php
// here you close `div.wrapper`
if ( $loop_count % 2 === 1 ) { ?>
</div>
<?php }
$loop_count++;
}
// here you close `div.wrapper` if you have odd count of elements
if ( $loop_count % 2 === 1 ) { ?>
</div>
<?php }?>
</div>
Less complicated solution is to split your array in chunks of size 2:
JavaScript
<?php
$array = [1,2,3,4];
$chunks = array_chunk($array, 2);
?>
<div class="container">
<?php
foreach ( $chunks as $chunk ) {?>
<div class="wrapper">
<span class="entry"><?= $chunk[0] ?></span>
<!-- Here you can check if second element exists -->
<span class="entry"><?= $chunk[1] ?></span>
</div>
<?php }?>
</div>