Wrap Div after every 3 iterations and count each divs inside-CodePudding

Hey guys I have this code below that wraps the items after 3 iterations in a div however, I got confused on how to count the items inside that div as I'll refer to it as a condition for my custom class.

So for a visualization, it should look like this

projectrow projectitemcount-3

project_item
project_item
project_item

projectrow projectitemcount-3

project_item
project_item
project_item

projectrow projectitemcount-2

project_item
project_item

How do I approach this?

This is what I have come up so far

if( ($i % 3) == 0 ) { $griditemcounter = 1; }
                        
                        // If is the first post, third post etc.
                         ( ( $i % 3 ) == 0 ) ?  $html .= '<div hljs-variable">$projectCounter.' grid-'.( ( $griditemcounter % 2 ) == 0 ? 'second' : 'first' ).'">'  :  $html .= '';                                  
                                $html .= '<div hljs-variable">$griditemcounter.'" style="background-image:url('.( $url ? $url : 'https://via.placeholder.com/940x1260').') ">';
                                    $html .= '<a href="'.get_the_permalink().'">';
                                        $html .= '<div ><img src="'.( $url ? $url : 'https://via.placeholder.com/768x375').'" alt=""/></div>';
                                        $html .= '<div >';
                                            $html .= '<h3>'.get_the_title().'</h3>';

                                             $terms = get_the_terms( get_the_ID(), $taxonomy ); 
                                                foreach($terms as $term) {
                                                    $html .= '<p>'. $term->name. '</p>';
                                            }
                                        $html .= '</div>';
                                    $html .= '</a>';
                                $html .= '</div>';  

                        

                        ( $i == ( $post_count - 1 ) || (   $i % 3 ) == 0 )  ? $html .=  '</div>'  : $html .= ''; 
$griditemcounter  ;

CodePudding user response：

I would add a variable called Count or Tracker and Set it to 1 outside of this loop. Once your code has iterated once and completed the process of doing this:

projectrow projectitemcount-(Add the variable Here)

project_item
project_item

Then you can add one to your variable outside of the loop. That way when the loop runs again it will add 2 onto the item count and add it onto the name.

CodePudding user response：

Do the math beforehand: You got 8 items here, so integer-divide that by 3, that gives you 2, multiply by 3 again, gives you 6 - that is the number of elements you will put into "full" divs, that contain 3 items each.

So as long as your loop counter variable $i is < 6, you output 3 as your class suffix.

And after that, for the last div, you output 8 modulo 3, which is also 2 here in this instance, as suffix - that is the number of remaining elements that will go into the last container.

Quick & dirty example to illustrate the principle:

$data = range('A', 'H'); // array of fake data
$limit = 3;
$numberFull = floor(count($data) / $limit) * $limit;
$remainder = count($data) % $limit;

for($i=0, $l=count($data); $i<$l;   $i) {
    echo $data[$i], ' - ',
       ($i % $limit == 0 ? ($i < $numberFull ? $limit : $remainder) : ''), "\n";
}

generates the following output:

A - 3
B - 
C - 
D - 3
E - 
F - 
G - 2
H -

CodePudding user response：

I do not really know the structure of your project items, but I will assume it is just a plain array like:

$items = [
  ['name' => 'Project 1'],
  ['name' => 'Project 2'],
  ['name' => 'Project 3'],
  ['name' => 'Project 4'],
  ['name' => 'Project 5'],
  ['name' => 'Project 6'],
  ['name' => 'Project 7'],
  ['name' => 'Project 8'],
];

If you have the above structure, you can array_chunk to get packs of at most 3 items then iterate over those pack to handle your display:

<?php
$itemsChunks = array_chunk($items, 3);
?>
<?php foreach($itemsChunks as $itemsChunk): ?>
  <div class="project_row projectcount-<?= count($itemsChunk); ?>">
  <?php foreach($itemsChunk as $item): ?>
    <p><?= $item['name']; ?></p>
  <?php endforeach; ?>
  </div>
<?php endforeach; ?>

Which would then output:

  <div class="project_row projectcount-3">
      <p>Project 1</p>
      <p>Project 2</p>
      <p>Project 3</p>
    </div>
  <div class="project_row projectcount-3">
      <p>Project 4</p>
      <p>Project 5</p>
      <p>Project 6</p>
    </div>
  <div class="project_row projectcount-2">
      <p>Project 7</p>
      <p>Project 8</p>
    </div>

You can Try it online!