0

I'm trying to achieve that after every third item it should break loop and save index of loop from where it bring out and again start loop from next saved index and again break out after third iteration and continues till the end. HTML Markup is:

<div class="homepage-resources">
   <div class="resource-col">
      <a href="#">
         <div class="blog-post-image">
            <img src="xyz/image.png" />
         </div>
      </a>
   </div>
   <div class="resource-col">
      <a href="#">
         <div class="blog-post-image">
            <img src="xyz/image.png" />
         </div>
      </a>
   </div>
</div>

this resource-col is repeating many times, following is my jquery code:

jQuery(".homepage-resources").each(function() {
        var tallestHeight = 0;
        jQuery(this).find(".resource-col").each(function(i) { 
            if (i % 3 == 0 && i != 0) {
                
                var imgHeight = jQuery(this).find(".blog-post-image > img").outerHeight();
                if (imgHeight > tallestHeight ) {
                    tallestHeight = imgHeight;
                }
                
                jQuery(this).find(".blog-post-image").css("height", tallestHeight);
            }
        });
    });

All I want is that to apply the same tallest height from to three items by comparing every three items, then break loop and go to next three items. I've tried this with modulus operator but not getting rest. It would be great if anyone can help to resolve this issue. Thanks in advance.

Muhammad Umair
  • 303
  • 1
  • 3
  • 8
  • 1
    Why not build your site using CSS [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) or [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)? Then you don't need any ugly JS hacks to correct the UI. Here's an [answer](https://stackoverflow.com/a/50254778/519413) demonstrating how it should be implemented to achieve what you need – Rory McCrossan Mar 11 '22 at 10:17
  • @RoryMcCrossan because title should start from same line in every 3 columns, images height is different in all, so through this we'll apply tallest height to all image wrappers in 3 columns and like this title will start from same line – Muhammad Umair Mar 11 '22 at 10:19
  • Which is exactly what the example I linked to can achieve without the need for JS – Rory McCrossan Mar 11 '22 at 10:21
  • @RoryMcCrossan applied that solution, still same problem. Title starts after image height and that is different in all columns – Muhammad Umair Mar 11 '22 at 10:26
  • Can you please edit the question to show what you tried. – Rory McCrossan Mar 11 '22 at 10:27
  • @RoryMcCrossan applied the display: grid properties to list and list items – Muhammad Umair Mar 11 '22 at 10:29

0 Answers0