如何反转数组数据？

Question

我希望数组 1,3,5,7,9 布局将从数组 0,2,4,6,8,10 反转，例如第一行布局 - 左侧的图像和右侧的描述，第二行的布局 - 图像在右边和左边的描述，并不断。

这是我的function.php代码

<?php

            foreach ( $termchildren as $child ) {

                $term = get_term_by( 'id', $child, $taxonomy_name );

                $image = get_field('featured_image', $term);

                ?>

                <div class="row">

                    <div id="product-cat <?php echo $term->slug ?>">

                        <div class="two-col product-cat-image">

                            <img src="<?php echo $image ?>">

                        </div>

                        <div class="two-col product-cat-details">

                            <?php

                                echo '<h4>'. $term->name .'</h4>';

                                echo '<p>'. $term->description .'</p>';

                                echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';

                            ?>

                        </div>

                    </div>

                </div><?php

            } ?>

CSS代码：

.row{

  display: flex;

  margin-left: -10px;

  margin-right: -10px;

  margin-bottom: 15px;

}

.row .col {

  flex: 1;

  padding-right: 10px;

  padding-left: 10px;

}

结果还是这样

我的期望是这样的：

Answer 1

我们只需要更改function.php中的代码，如下所示。<?php&nbsp; &nbsp; $i=0;&nbsp;&nbsp; &nbsp; foreach ( $termchildren as $child ) {&nbsp; &nbsp; &nbsp; &nbsp; $term = get_term_by( 'id', $child, $taxonomy_name );&nbsp; &nbsp; &nbsp; &nbsp; $image = get_field('featured_image', $term);&nbsp; &nbsp; &nbsp; &nbsp; if($i % 2){ ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="product-cat <?php echo $term->slug ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="two-col product-cat-image">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="<?php echo $image ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="two-col product-cat-details">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<h4>'. $term->name .'</h4>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<p>'. $term->description .'</p>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <?php } else {?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="product-cat <?php echo $term->slug ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="two-col product-cat-details">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<h4>'. $term->name .'</h4>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<p>'. $term->description .'</p>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="two-col product-cat-image">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="<?php echo $image ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <?php }&nbsp; &nbsp; &nbsp; &nbsp;$i++;&nbsp; &nbsp; }?>希望现在你得到了所有的东西，让我知道还有什么需要帮助的。

Answer 2

您需要添加以下 css 以实现所需的输出：当.product-cat发现奇数div 适用order: 1;于图像容器（.product-cat-image）和order: 2;细节容器（.product-cat-details）当.product-cat找到的 div 也适用order: 2;于图像容器（.product-cat-image）和order: 1;细节容器（.product-cat-details）.product-cat:nth-child(odd) .product-cat-image{&nbsp; &nbsp;-webkit-order: 1;&nbsp; &nbsp; order: 1;}.product-cat:nth-child(odd) .product-cat-details{&nbsp; &nbsp;-webkit-order: 2;&nbsp; &nbsp; order: 2;}.product-cat:nth-child(even) .product-cat-image{&nbsp; &nbsp;-webkit-order: 2;&nbsp; &nbsp; order: 2;}.product-cat:nth-child(even) .product-cat-details{&nbsp; &nbsp;-webkit-order: 1;&nbsp; &nbsp; order: 1;}