PHP foreach循環每3個循環內爆

Question

我需要創建一個庫。我有從01到09的圖像。我需要按照foreach進行劃分。第一個div必須有一個活動的類。我們需要每隔3張圖片重複一次div。我需要這個html：

  <div class="item active"> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="01.jpg" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="02.jpg" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="03.jpg" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 


      ... 


      <div class="item"> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="07.jpg" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="08.jpg" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="09.jpg" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

但我的代碼不起作用。我不知道如何完成這個... 這裏是我的PHP代碼：

<div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel"> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner"> 
      <?php 
      $countedimage = 0; 
      $counteddiv = 0; 
      $count = count($images_bottom); 
      for ($x = 0; $x <= $count; $x++) { 
       $countedimage++; 
       $counteddiv++; 
       if($countedimage == '4') { 
        $countedimage = 0; 
       ?> 
      <div class="item<?php if($counteddiv != '1') { ?> active<?php } ?>"> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <div class="col-item"> 
          <div class="photo"> 
           <img src="<?php echo $images_bottom[$x]['popup']; ?>" class="img-responsive" alt="a" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
       <?php } ?> 
       <?php } ?> 

      </div> 
    </div> 

Answer 1

首先，讓我們開始將您的圖像分成三個倍數。

// An arbitrary list of image file names (used for clarity). 
$images = ['image-1.jpg', 'image-2.jpg', 'image-3.jpg', 'image-4.jpg', 'image-5.jpg', 'image-6.jpg', 'image-7.jpg', 'image-8.jpg', 'image-9.jpg']; 

// Separate images into groups of three. 
$images = array_chunk($images, 3); 

接下來我們需要看看輸出。所以以你的HTML爲例：

<div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel"> 
    <div class="carousel-inner"> 
     <?php // Loop over each group of three images ?> 
     <?php foreach ($images as $g => $group): ?> 

      <div class="item <?= ($g == 0) ? 'active' : '' ?>"> 
       <div class="row"> 
        <?php // Loop over each image in group ?> 
        <?php foreach ($group as $i => $image): ?> 

         <div class="col-sm-4"> 
          <div class="col-item"> 
           <div class="photo"> 
            <img src="<?= $image ?>" class="img-responsive" alt="a" /> 
           </div> 
          </div> 
         </div> 

        <?php endforeach ?> 
       </div> 
      </div> 
     </div> 

     <?php endforeach ?> 
    </div> 
</div> 

Answer 2

所以，你基本上要打印每一個項目這一部分：

<div class="col-sm-4"> 
    <div class="col-item"> 
     <div class="photo"> 
      <img src="<?php echo $src ?>" class="img-responsive" alt="a"/> 
     </div> 
    </div> 
</div> 

而你只想要打印此部分每3時，圍繞上述塊3組：

<div class="item active"> 
    <div class="row"> 


    </div> 
</div> 

，而不是試圖保持的2個獨立的計數的軌道，你在做什麼，你可以通過使用m事情簡單化嗅覺運算符%以及您的循環索引$x。

當您想要在特定時間間隔重複某些操作時，這非常有用。從本質上講，你可以做這樣的事情重複的東西每$z次數：

if($totalCount % $z == 0) 

例子：

for ($x = 1; $x < 50; $x++) { 
    if ($x % 5 == 0) echo $x . '<br>'; 
} 

// results: 
// 5 
// 10 
// 15 
// 20 
// 25 
// 30 
// 35 
// 40 
// 45 

在你的情況下，像這樣的工作：

<?php for ($x = 0; $x < count($images_bottom); $x++) { 
    $src = $images_bottom[$x]['popup']; 
    $item_active = $x==0 ? 'item active' : 'item'; // only use 'item active' first one 

if ($x % 3 == 0) { // only display every 3rd time?> 
    <div class="<?php echo $item_active ?>"> 
     <div class="row"> 
<?php } ?> 
      <div class="col-sm-4"> 
       <div class="col-item"> 
        <div class="photo"> 
         <img src="<?php echo $src ?>" class="img-responsive" alt="a"/> 
        </div> 
       </div> 
      </div> 
<?php if ($x % 3 == 2 || $x == count($images_bottom)-1){ // only display after every 3rd time (after items 0, 1, 2) or on last one ?> 
     </div> 
    </div><?php } ?> 

<?php } ?>