PHP Loop：Bootstrap Slider每3个项目添加带有项目类的div，第一个将有活动答案

【问题标题】：PHP Loop: Bootstrap Slider Add div with item class every 3 item and the first one will have activePHP Loop：Bootstrap Slider每3个项目添加带有项目类的div，第一个将有活动
【发布时间】：2019-04-07 12:46:36
【问题描述】：

我拥有的当前代码正在渲染额外的div。你能帮我改一下吗？

每 3 个项目将位于带有 item 类的 div 中，第一个项目将具有 active 类。

<!-- Carousel items -->
<div class="carousel-inner">

  <div class="item active">
      <div class="row">
          <?php
              $args = array(
                  'post_type' => 'product',
                  'product_cat' => 'Featured',
                  'posts_per_page' => 12
              );
              $loop = new WP_Query( $args );
              if ( $loop->have_posts() ) {
                  $postcount = 0;
                  $i = 1;
                  while ( $loop->have_posts() ) : $loop->the_post();
                  $postcount ++;
          ?>
          <div class="col-md-4 item-entry-index">
              <div class="car-index">
                  <img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>" class="img-responsive" alt=""/>
              </div>
          </div>
          <?php
              if ( $i % 3 === 0 ) {
                  echo '</div></div><div class="item"><div class="row">';
              }
          ?>
          <?php
              $i++;
              endwhile;
              } else {
                  echo __( 'No products found' );
              }
              wp_reset_postdata();
          ?>
      </div>
  </div>

</div><!--.carousel-inner-->

【问题讨论】：

标签： php html css twitter-bootstrap bootstrap-slider

【解决方案1】：

据我了解您的代码，您每页显示 12 个帖子。当您显示第 12 个（最后一个）帖子（除以 3）时，您将关闭 .item 和 .row div。同时，您打开新的.item 和.row div。紧接着while 循环结束，您的最后一篇文章将如下所示：<div class="item"><div class="row"></div></div>。这就是问题出现的地方。因此，您还需要检查帖子是否是帖子数组中的最后一项。我扩展了您的 if 声明，例如：if ($i % 3 === 0 && $i < $args['posts_per_page']) { ... }。我希望这会对你有所帮助。

<!-- Carousel items -->
<div class="carousel-inner">

  <div class="item active">
      <div class="row">
          <?php
              $args = array(
                  'post_type' => 'product',
                  'product_cat' => 'Featured',
                  'posts_per_page' => 12
              );
              $loop = new WP_Query( $args );
              if ( $loop->have_posts() ) {
                  $postcount = 0;
                  $i = 1;
                  while ( $loop->have_posts() ) : $loop->the_post();
                  $postcount ++;
          ?>
          <div class="col-md-4 item-entry-index">
              <div class="car-index">
                  <img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>" class="img-responsive" alt=""/>
              </div>
          </div>
          <?php
              if ( $i % 3 === 0 && $i < $args['posts_per_page']) {
                  echo '</div></div><div class="item"><div class="row">';
              }
          ?>
          <?php
              $i++;
              endwhile;
              } else {
                  echo __( 'No products found' );
              }
              wp_reset_postdata();
          ?>
      </div>
  </div>

</div><!--.carousel-inner-->

【讨论】：