时间戳

首页 > 解决方案 > 每 4 个 div 包裹在一个 div 中

php - 每 4 个 div 包裹在一个 div 中

问题描述

有这样一个循环，我想用 tabs__cat-img 类获得 4 个 div 重复，这 4 个 div 应该变成一个带有 tabs__ cat 类的 div。我将不胜感激任何帮助。

<?php
    if($children_categories) :
    foreach($children_categories as $children_cat) :
?>
<div class="tabs__cat">
    <div class="tabs__cat-img">
        <a href="">
            <img src="" alt="">
        </a>
    </div>
</div>
<?php
    endforeach;
    endif;
?>

输出应如下所示：

<div class="tabs__cat">
    <div class="tabs__cat-img">
        <a href="">
            <img src="" alt="">
        </a>
    </div>
    <div class="tabs__cat-img">
        <a href="">
            <img src="" alt="">
        </a>
    </div>
    <div class="tabs__cat-img">
        <a href="">
            <img src="" alt="">
        </a>
    </div>
    <div class="tabs__cat-img">
        <a href="">
            <img src="" alt="">
        </a>
    </div>
</div>

<div class="tabs__cat"> ...

标签： phpwordpressloopsforeach

解决方案

我会这样做：

<?php
// Creates a sample array
$children_categories = array_fill(0, 10, 'Sample');

if($children_categories) :

    $total_categories = count($children_categories) - 1;

    foreach($children_categories as $id=>$children_cat) :

    // True for 0 -> Div will be created on first and then every 4th element
    if( $id % 4 === 0 ) { 
        echo '<div class="tabs__cat">';
    }
    // or, a bit shorter: 
    // echo $id % 4 === 0 ? '<div class="tabs__cat">' : '';

    ?>

    <div class="tabs__cat-img">
        <a href="">
            <img src="" alt="">
        </a>
    </div>

    <?php

    // True on 3 -> closing Div will be created before 4th and then every 4th element
    // Or Case: Make sure to print closing div on very last element
    if( $id % 4 === 3 || $id === $total_categories ) { 
        echo '</div>';
    }

    endforeach;
endif;
?>

推荐阅读