PHP 循环 : Bootstrap Slider Add div with item class every 3 item and the first one will have active

Question

我的当前代码正在呈现额外的 div。你能帮我解决一下吗？

每 3 个元素将在一个 div 中，上面有 item 类，第一个元素将有 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-->

Answer 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-->