嵌套 for 循环以每 3 个项目创建 2 个 HTML 行，并用外部 HTML 包装器包装每 2 行

Question

所以基本上我正在构建一个 wordpress 画廊，我需要将图像输出为 2 行，每行是 3 张图像，所以基本上我只是每 3 次分割输出......

我使用模数运算符在 for 循环中使用该功能，我需要每 2 行将它们包装在外部 HTML 容器中

<div class="wrappy"> 

但是我昨天大部分时间都在处理它，我似乎无法完全正确地完成它，我在 PHP 方面不是那么好，但我理解的足够多，所以任何帮助都会很棒......我正在使用 wordpress 高级自定义用于存储图像等的字段，因此您可以忽略该部分，我正在研究的魔法始于

<div class="wrappy">

                <?php

                $rows = get_field('staff_slides', 'options');
                $countmax = count($rows) - 1;

                //echo $row_count; 

                $ender = "";
                $mainEnder = "";
                $outer_wrapper = "";

                if( have_rows('staff_slides', 'options') ):

                    // loop through the rows of data
                    while ( have_rows('staff_slides', 'options') ) : the_row();

                        $image_id = get_sub_field('slide_image', 'options');

                        $staff_members_name = get_sub_field('staff_members_name', 'options');

                        $staff_members_position = get_sub_field('staff_members_position', 'options');

                        $staff_image = wp_get_attachment_image_src( $image_id , 'homepage-staff');


                ?>






                                <?php 


                    echo '<div class="wrappy">';


                                    echo '<div class="row">'; 

                                        if( $ender != "script-ended" )  {

                                            for( $i=0; $i <= $countmax; ) 
                                            { 

                                ?>

                                    <div class="staff-img c3">
                                        <div class="staff-caption">
                                            <h3><?php echo $rows[$i]['staff_members_name']; ?></h3>
                                                <span></span>
                                            <h4><?php echo $rows[$i]['staff_members_position']; ?></h4>
                                        </div>
                                            <img src="<?php echo wp_get_attachment_image_src( $rows[$i]['slide_image'], 'homepage-staff')[0]; ?>">
                                    </div>

                                <?php
                                        if( $i % 3 == 2 )  
                                        {


                                                echo '</div><div class="row">';
                                            }

                                        if( $i == $countmax ) 
                                        {
                                                $ender = "script-ended";                
                                            }


                                        if( $i == 6){


                                            $outer_wrapper = "set";

                                        }   





                                        $i++;

                                        }
                                    }

                                ?>

                <?php 

                if( $outer_wrapper == "set" ){

                    echo '</div><div class="wrappy">';

                }


                ?>

Answer 1

您应该使用array_chunk 函数将数组拆分为更小的数组。 我不熟悉 ACF 功能，但您可以执行以下操作：

<div class="wrappy">
  <?php
  if( have_rows('staff_slides', 'options') ) :
  $slides = array_chunk(get_field('staff_slides', 'options'), 3);
    foreach ($slides as $slides_row) :
      ?>
      <div class="row">
        <?php foreach ($slides_row as $slide_element) : the_row(); ?>
        <div class="staff-img c3">
          <div class="staff-caption">
            <h3><?php the_sub_field('staff_members_name', 'options'); ?></h3>
            <span></span>
            <h4><?php the_sub_field('staff_members_position', 'options'); ?></h4>
          </div>
          <img src="<?php echo wp_get_attachment_image_src( get_sub_field('slide_image', 'options'), 'homepage-staff')[0]; ?>">
        </div>
      <?php endforeach; ?>
    </div>
  <?php endforeach; else : ?>
    No slides do to show
  <?php endif; ?>
</div>

通过这种方式，您可以创建一个多维数组，分成 3 个元素的块，然后遍历它。