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

Question

基本上我正在创建一个wordpress图库，我需要将图像输出成两行，每行有3张图像所以实际上我只是将输出分成每3张。

我有这个功能使用模数运算符的for循环，我需要的是每两行我需要把它们包装在一个外部的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个元素的块，并遍历它。