PHP循环 - 每三个项目添加一个Div

Here is the Code that works for 3 items, and if there is exact multiples of 3 items (ie, if we have 9 items) then it will add an extra blank div at the end.

if there is items that is not multiples of 3 (ie, if we have 8 items) then it works fine. I am not a programmer,

so any help will be appreciated:

Bellow are the code sample:

<div class="row">
    <?php 
       $i = 1;
       $wp_query = new WP_Query( array( 'posts_per_page' => -1, 
                  'post_type' => 'projects' ) );
      echo '<div class="panel">';
      if ( $wp_query->have_posts() ) : 
         while ( $wp_query->have_posts() ) : $wp_query->the_post();
         the_title();         
       if($i % 3 == 0) { echo '</div><div class="panel">'; }
     $i++; 
      endwhile; endif;
     echo '</div>';    
  ?>

</div>

Try this code

<div class="row">
    <?php 
      $i = 1;
      $wp_query = new WP_Query( array( 'posts_per_page' => -1, 
                  'post_type' => 'projects' ) );

      if ( $wp_query->have_posts() ) : 
         while ( $wp_query->have_posts() ) :
            if($i % 3 == 1) { echo '<div class="panel">'; }
            $wp_query->the_post();
            the_title();         
            if($i % 3 == 0 || $i == $wp_query->post_count) { echo '</div>'; }
            $i++; 
         endwhile;
      endif; 
  ?>

</div>

You can add a div after your loop ends if its not a multiple of 3.

<div class="row">
<?php 
    $i = 1;
    $wp_query = new WP_Query( array( 'posts_per_page' => -1, 
        'post_type' => 'projects' ) );
    echo '<div class="panel">';

    if ( $wp_query->have_posts() ) : 
        while ( $wp_query->have_posts() ) :
            $wp_query->the_post();
            the_title();         
            if($i % 3 == 0) { echo '</div><div class="panel">'; }
            $i++; 
        endwhile;
    endif;
    if($i % 3 != 0) { echo '</div><div class="panel">'; }
    echo '</div>';
?>
</div>

There are many ways to solve this problem, here is one:

<div class="row">
<?php 

  echo '<div class="panel">';
  $i = 0;
  $wp_query = new WP_Query(array('posts_per_page' => -1, 
                                 'post_type'      => 'projects'));
  if ($wp_query->have_posts()) { 
    while ($wp_query->have_posts()) {
      if($i % 3 == 0)
      {
        if ($i > 0) echo '</div>';
        echo '<div class="panel">';
      }
      $wp_query->the_post();
      the_title();         
      $i++; 
    }
    echo '</div>';    
  } 

?>
</div>

I also cleaned up the code and got rid of the bug that occurs when there are no posts.

If I understand your question correctly you don't want to ad an empty div if your query returns exact multiples of 3 items.

So instead this:

if($i % 3 == 0)

Use this:

if($i % 3 == 0 && $wp_query->post_count != $i)

My suggestion was to edit your code to this:

<div class="row">
    <?php 
    $i = 1;
    $wp_query = new WP_Query(array('posts_per_page' => -1, 'post_type' => 'projects'));
    echo '<div class="panel">';
    if($wp_query->have_posts()) : while ($wp_query->have_posts()) :
         $wp_query->the_post();

         the_title();         
         if($i % 3 == 0 && $wp_query->post_count != $i){
             echo '</div><div class="panel">';
         }
         $i++; 
     endwhile; endif;
     echo '</div>';    
  ?>

</div>

But since then Max P. made a better answere using my suggestion. The difference between the two code is when no item is given this code gonna create an empty div, but his not.

You can add a variable called $j and $j = floor($i/3).

And then if($i % 3 == 0 && $i != 3 * $j) { echo '</div><div class="panel">'; };