Jquery to check the height of all children

Question

<a href="#" class="button">BUTTON</a>
<div class="parent">
     <div class="child">Content 01</div>
     <div class="child">Content 02</div>
     <div class="child">Content 03</div>
     <div class="child">Content 04</div>
     <div class="child">Content 05</div>
</div>

Here's my HTML, I already have it written where you rollover a.button and div.parent is visible, and on rollout, div.parent's visibility is set to hidden.

I would like to write another script that, on a.button hover, jQuery checks each height the of div.child in div.parent, figures out which is the tallest, and sets THAT as div.parent's height.

I know there will be a each loop, but I don't know how to look and compare values.

Thank you in advance.

Answer 1

Try this out:

$('a.button').on('mouseenter', function() {
    var maxHeight = 0;
    $('div.child').each(function() {
        if ($(this).height() > maxHeight) maxHeight = $(this).height();
    });
    $('div.parent').height(maxHeight);
});

Answer 2

Try this,

$("a.button").on("hover", function(){
    var maxHeight = 0;
    $(".child").each(function(){ 
        var height = $(this).height();
        if( height > maxHeight){
            maxHeight = height;
        }
    });
    $(".parent").height(maxHeight);
});