Question

This can be done using the following code [Source]:

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}
$(document).ready(function() {
   equalHeight($(".group .block"));
});

However, my case is that I have different containers like this:

<div class="group" id="group1">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>

<div class="group" id="group2">
<div class="block"></div>
<div class="block"></div>
</div>

etc.

Using the solution from that example, I am getting all blocks, irrespective of the group with equal heights. The problem, tallest block of #group1 may not be equal to the tallest block of #group2. And I need height of blocks should be adjusted according to the tallest blocks of respected groups. I cannot use ids for groups in my case.

Any help guys? Thanks for passing by.

Answer 1

just execute the function equalHeight for each different .group element

$(document).ready(function() {
   $(".group").each(function() {
      equalHeight($(this).find(".block"));
   });
});