A Callback to $.each()'s Callback?

Question

Update: The code below does indeed work as expected, and accomplishes the code I wanted. My confusion was in understanding what I had in my markup when writing the code below - after giving my markup a second look, I realized my code worked perfectly.

I've provided my answer below for all who are interested in the more thorough explanation.

---

I'm trying to delay an action until after a $.each() cycle has completed, but cannot seem to get it working. More specifically, I'm cycling through a series of DIV's to determine the tallest, and then setting the height of all to that value, but I have to wait until I have that highest value before I can set the height of the others:

/* Fixing Module Heights */
$("div.module-box").each(function(){
  maxHeight = 0;
  $("div.module-body", this).each(function(){
    currentHeight = $(this).height();
    if (currentHeight > maxHeight) maxHeight = currentHeight;
  });
  $("div.module-body", this).css("height", maxHeight);
});

It should turn this:

<div class="module-box">
  <div style="height:75px" class="module-body">Hello World</div>
  <div style="height:10px" class="module-body">Hello World</div>
</div>
<div class="module-box">
  <div style="height:50px" class="module-body">Hello World</div>
  <div style="height:13px" class="module-body">Hello World</div>
</div>

Into this:

<div class="module-box">
  <div style="height:75px" class="module-body">Hello World</div>
  <div style="height:75px" class="module-body">Hello World</div>
</div>
<div class="module-box">
  <div style="height:50px" class="module-body">Hello World</div>
  <div style="height:50px" class="module-body">Hello World</div>
</div>

Answer 1

try this, I understand what's wrong here, apologies for not getting it immediately

$("div.module-body").each(function(){
  $("div.module-body", this).css("height", maxHeight);
});

After the first each block. That way for each box of div's you will run two each loops. One gets the max height and the other sets it.

Answer 2

Try with this:

var maxHeight = 0, currentHeight=0;
$("div.module-box").each(function(){ 
    currentHeight = $(this).height();
    if (currentHeight > maxHeight) maxHeight = currentHeight; 
});
$("div.module-body").css("height", maxHeight);

If you want that relative to their parents:

$("div.module-box").each(function(){ 
var maxHeight = 0, currentHeight=0;
    $(this).children("div").each(function(){
    currentHeight = $(this).height();
    if (currentHeight > maxHeight) maxHeight = currentHeight;
    }).css("height", maxHeight); 
});

Answer 3

I added the index on each loop and check when last element is reached to set the maxHeight:

/* Fixing Module Heights */

$("div.module-box").each(function(){

  maxHeight = 0;

  moduleBodies = $("div.module-body", this);

  moduleBodies.each(function(i){

    currentHeight = $(this).height();

    if (currentHeight > maxHeight) maxHeight = currentHeight;
    if (i == moduleBodies.length -1) $("div.module-body", this).css("height", maxHeight);
  });


});

Answer 4

Don't know if this is the issue but you should use var when declaring your variables.

/* Fixing Module Heights */
$("div.module-box").each(function(){
    var maxHeight = 0;
    $("div.module-body", this).each(function(){
        var currentHeight = $(this).height();
        if (currentHeight > maxHeight) maxHeight = currentHeight;
    });
    $("div.module-body", this).css("height", maxHeight);
});

Answer 5

There is no problem here. The code provided here works perfectly with the markup provided here. The issue was with my local-markup; it wasn't exactly the same as the markup provided here in an attempt to simplify the markup:

<div class="module-row">
  <div class="module-box">
    <div class="module-body">
      <p>Hello World</p>
    </div>
  </div>
  <div class="module-box">
    <div class="module-body">
      <p>Hello World</p>
    </div>
  </div>
</div>

Note here in my example there is only one .module-body within each module-box. For this reason, the .each() was setting the module-body's height to whatever it was to begin with.

What I intened to do was test each module-body within every module-row. My altered code looks like this:

$("div.module-row").each(function(){
  maxHeight = 0;
  $("div.module-body", this).each(function(){
    currentHeight = $(this).height();
    if (currentHeight > maxHeight) maxHeight = currentHeight;
  });
  $("div.module-body", this).css("height", maxHeight);
});

The only difference is the first selector. It used to be "div.module-box" and is now "div.module-row".

Thank you to everybody here who helped me discover my issue.