在循环中包装每两次潜水

Question

我的HTML结构如下:

<div class="container">
<div class=row 1>
<img src="#" />
<img src="#" />
</div>
<div class=row 2>
<img src="#" />
<img src="#" />
</div>
<div class=row 3>
<img src="#" />
<img src="#" />
</div>
</div>

我将使用for each环。在for each循环的每两次迭代之后，我想要启动新的容器div和row 1, row 2和row 3 div s。我的意思是主div应该包装3行，每一行div将包装两个图像或div。我用的是单循环。我应该如何应用for each循环计数器?

Answer 1

假设您有一组图像或其他想要放入div中的内容。这是你必须做的概念，然后你可以根据需要调整它，或者使用你喜欢的编码样式:

<?php
$contents = array('img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg','img6.jpg');
echo '<div class="container">'; 
$rowCount = 0;
foreach ($contents as $key => $value) {
    if ($key % 2 == 0) {
        if ($key > 0) {
            echo "</div><!--close .row-->";
        }
        $rowCount++;
        echo '<div class="row row' . $rowCount . '"><!--opening .row-->';
    }
    echo '<img src="' . $value . '" alt="This is image: ' . $value . '">';
}
echo '</div><!--close .row-->';
echo '</div><!--close .container-->';

它将渲染:

<div class="container">
    <div class="row row1"><!--opening .row-->
        <img src="img1.jpg" alt="This is image: img1.jpg">
        <img src="img2.jpg" alt="This is image: img2.jpg">
    </div><!--close .row-->
    <div class="row row2"><!--opening .row-->
        <img src="img3.jpg" alt="This is image: img3.jpg">
        <img src="img4.jpg" alt="This is image: img4.jpg">
    </div><!--close .row-->
    <div class="row row3"><!--opening .row-->
        <img src="img5.jpg" alt="This is image: img5.jpg">
        <img src="img6.jpg" alt="This is image: img6.jpg">
    </div><!--close .row-->
</div><!--close .container-->

Answer 2

您可以使用数组块来做到这一点，参见以下代码:

foreach (array_chunk($yourArray, 2, true) as $results)
{
     <div class="row">
      foreach($results as $result)
       {
         //display it here 
       }
     </div>
}