Opening and closing div based on loop

First row is correct (4 elements), second row is wrong (5 elements)

I know that maybe this is not a WP exclusively related question but I think the fault here is the loop and I am missing something.
I am trying to create a custom ‘archive’ page where, using the loop, I would like to style my posts in group of 4.
Right now I have 10 posts in this category and I don’t think they will be much more but I can’t force anything because they can increase or decrease easily.

<div id="bun" class="bun sezmenu">
<?php $catquery = new WP_Query( 'category_name=bun&&posts_per_page=-1&&nopaging=true'); $et_npb = 1;$id = 37;$category = get_category($id);$count = $category->category_count;?>
<?php if ($catquery->have_posts() ) : while($catquery->have_posts()) : $catquery->the_post();?>
    <?php if ($et_npb === 1 || $et_npb % 5 === 0 ){ echo '<div class="row">' ;};?>
    <div class="col">
        <div class="list__item list__item_ajax">
            <a href="" title="<?php the_title();?>" class="umodal__open" umodal-src="<?php the_permalink();?>">
                <img class="lazyload rounded-circle"
                     src="<?php echo get_stylesheet_directory_uri(); ?>/img/bn/bun.png"
                     data-src="<?php echo get_stylesheet_directory_uri(); ?>/img/bun.png"
                     height="128" width="128"
                     alt="<?php the_title();?>" />
            </a>
        </div><!-- list__item list__item_ajax -->
    </div>
<?php ++$et_npb; if ($et_npb % 5 == 0 || $et_npb == $count){echo '</div>';};
endwhile;endif;?>

As you can see in the image below there is something wrong and I can’t figure out what.
Am I correctly using the function to count all the posts in this category?

I tried also this tool to try to understand if the divs are left open or they are closed.

<divid="bun" class="bun sezmenu">
  |<divclass="row">
  |       |<divclass="col">
  |       |       |<divclass="list__item list__item_ajax">
  |       |       |</div>
  |       |</div>
  |       |<divclass="col">
  |       |       |<divclass="list__item list__item_ajax">
  |       |       |</div>
  |       |</div>
  |       |<divclass="col">
  |       |       |<divclass="list__item list__item_ajax">
  |       |       |</div>
  |       |</div>
  |       |<divclass="col">
  |       |       |<divclass="list__item list__item_ajax">
  |       |       |</div>
  |       |</div>
  |</div>
  |<divclass="row">
  |       |<divclass="col">
  |       |       |<divclass="list__item list__item_ajax">
  |       |       |</div>
  |       |</div>
  |       |<divclass="col">
  |       |       |<divclass="list__item list__item_ajax">
  |       |       |</div>
  |       |</div>
  |       |<divclass="col">
  |       |       |<divclass="list__item list__item_ajax">
  |       |       |</div>
  |       |</div>
  |       |<divclass="col">
  |       |       |<divclass="list__item list__item_ajax">
  |       |       |</div>
  |       |</div>
  |       |<divclass="col">
  |       |       |<divclass="list__item list__item_ajax">
  |       |       |</div>
  |       |</div>
  |</div>
  |<divclass="row">
  |       |<divclass="col">
  |       |       |<divclass="list__item list__item_ajax">
  |       |       |</div>
  |       |</div>
  |</div>
  |<divid="piadina" class="piadina sezmenu">
  |</div>
  |<divid="crepe" class="crepe sezmenu">
  |</div>
  |<divid="dolci" class="dolci sezmenu">
  |</div>
  |<divumodal-id="umodal-1" class="umodal">
  |       |<divclass="umodal__inner">
  |       |       |<divclass="umodal__content">
  |       |       |</div>
  |       |</div>
  |</div>

And it says that I am missing somewhere 1 tags but this is obvious because my loop doesn’t close correctly all the divs.

Read more here:: Opening and closing div based on loop

Leave a Reply

Your email address will not be published. Required fields are marked *