Process every nth element separately in JQuery

Question

I have an html structure like this:

Each

has

and element that has a different height, therefore I had to make every

element has the same height by finding the highest

and and apply the height to every

and inside the

element like this script which works perfectly, and i have separated the list into 3 columns for each row, so roughly it will look like this:

+------+ +------+ +------+  
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
+------+ +------+ +------+
+------+ +------+ +------+
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
+------+ +------+ +------+
+------+ +------+ 
|      | |      | 
|      | |      |
|      | |      | 
|      | |      |  
+------+ +------+

Since i process every element inside li at the same time to get the highest height of

and element, it will make one of the

height is too much, i want to process

into a separate batch (each row with 3 columns) , so they will have the same height only for the same row, for example:

+------+ +------+ +------+   
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
+------+ +------+ +------+
+------+ +------+ +------+
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
+------+ +------+ +------+
+------+ +------+ 
|      | |      | 
|      | |      |
+------+ +------+

$(document).ready(function() {
  adjustHeights()

  function adjustHeights() {
    var classes = ['.product-name', '.product-image'];
    var mainClass = '#product-list';
    $.each(classes, function(index, elementClass) {
      adjustHeight(mainClass, elementClass)
    });
  }

  function adjustHeight(mainClass, elementClass) {
    var productElem = $(mainClass).find(elementClass);
    var i = 0;
    var elementHeights = productElem.map(function() {
      return $(this).height();
    }).get();
    var maxHeight = Math.max.apply(null, elementHeights);
    productElem.height(maxHeight);
  }
});



  
    XXXXX
    
  
  
    XXXXX
    
  
  
    XXXXX
    
  
  
    XXXXX
    
  
  
    XXXXX
    
  
  
    XXXXX
    
  
  
    XXXXX
    
  
  
    XXXXX

user_3257622 · Answer

CSS Flexbox can help you align your content, this can be scaled easily and doesn't require any JS.

For the example i removed the images and placed some random tags.

#product-list {
  display: flex;
  flex-wrap: wrap; /* Allow elements to overflow downwards */
  padding: 0;
}

#product-list li {
  flex: 0 0 calc(33.333333% - 10px); /* 33% for 3 column layouts, remove 10px because of margin left and right*/
  margin: 0 5px 10px;
  background: red;
  list-style-type: none;
  
  display: flex;
  align-items: stretch; /* Force same height on image and p tag */
}

p {
  margin: 0;
  background: green;
  flex: 0 0 50%; /* make 50% width of LI */
}

.fake-img {
  background: blue;
  flex: 0 0 50%; /* make 50% width of LI */
}


  
   XXX
XX
   IMG
  
  
   XX
XXX
   IMG
  
  
   XX

XXX
   IMG
  
  
   XX
XXX
   IMG
  
  
   XXXXX
   IMG
  
  
   XXX
XX
   IMG
  
  
   XXXXX
   IMG
  
  
   XXXXX
   IMG

Process every nth element separately in JQuery

1 Answers