jQuery How to compare the height of a few div blocks, and apply more of them?

Question

I need to compare the height of 5 blocks of different heights and apply most of them for main block. I could only turn to compare all of the blocks in order.

var
      $content1maintabs = $('.main-tabs .content-1');
      $content2maintabs = $('.main-tabs .content-2');
      $content3maintabs = $('.main-tabs .content-3');
      $content4maintabs = $('.main-tabs .content-4');
      $content5maintabs = $('.main-tabs .content-5');

  $(window).on( 'load', function() {
        content2maintabs = ($content2maintabs.height() > $content1maintabs.height()) ? $content2maintabs.height() : $content1maintabs.height();
        content3maintabs = ($content3maintabs.height() > content2maintabs) ? $content3maintabs.height() : content2maintabs;
        content4maintabs = ($content4maintabs.height() > content3maintabs) ? $content4maintabs.height() : content3maintabs;
        main = ($content5maintabs.height() > content4maintabs) ? $content5maintabs.height() : content4maintabs;
        $('.main-tabs .content').height(main);
    });

  $(window).resize(function(){
        content2maintabs = ($content2maintabs.height() > $content1maintabs.height()) ? $content2maintabs.height() : $content1maintabs.height();
        content3maintabs = ($content3maintabs.height() > content2maintabs) ? $content3maintabs.height() : content2maintabs;
        content4maintabs = ($content4maintabs.height() > content3maintabs) ? $content4maintabs.height() : content3maintabs;
        main = ($content5maintabs.height() > content4maintabs) ? $content5maintabs.height() : content4maintabs;
        $('.main-tabs .content').height(main);
    });

I want to know how to make it more convenient.

Answer 1

Put one class on all of your content children, so instead of content-1 , content-2 , etc, in your javascript, you could just put content-child . Your class attribute would look like class="content-1 content-child" , class="content-2 content-child" , etc.

You can then do this:

$(window).on( 'load', function() {
        var largestHeight = 0; //Init height as 0
        $('.main-tabs .content-child').each(function() { //Loop through all content-1, content-2, etc
             if ($(this).height > largestHeight)
                largestHeight = $(this).height();             
        }
        $('.main-tabs .content').height(largestHeight);
    });

Answer 2

I would do something like this:

function setMaxHeight(){
    var maxHeight = 0;
    $('.main-tabs [class*="content-"]').each(function checkHeight(){
        if($(this).height() > maxHeight){
            maxHeight = $(this).height();
        }
    });
    $('.main-tabs .content').height(maxHeight);
}

$(setMaxHeight);
$(window).resize(setMaxHeight);

Answer 3

1. Make named funciton that will contain your calculations.
2. Execute this function on window.load and window.resize - this will make your code shorter( don't repeat yourself ).
3. Use universal selector. As i see, you can make array of elements with selector $('.main-tabs') . After this use array.each to calculate element's height.
4. Use variable to store max height value of element. if(a < element[n].height) a = element[n].height That will help you to make toyr code shorted.

PS I think the best help - to explain how code should works and looks like but not the pure code without explaining.

Answer 4

You will want to use a loop to make this more efficient.

---

You will loop through each child element. Compare this elements height, with the current tallest.

If it's taller, than the current tallest element. Set this as the new value.

Once you have looped through each element, you will want to globally set the height to all your looped elements, with your tallest tracked height.

 jQuery(function($) { var tallest = 0; $('.content').each(function() { var height = $(this).height(); if (height > tallest) { tallest = height; } }); $('.content').height(tallest); }); 

 .content { border: 1px solid #000; display: inline-block; margin: 10px; height: 50px; width: 50px; } .content-1 { height: 80px; } .content-3 { height: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="main-tabs"> <div class="content content-1"></div> <div class="content content-2"></div> <div class="content content-3"></div> </div> 

Answer 5

As some of the others mentioned here, try to make your code more manageable by creating functions for things you tend to do repetitively. It makes it easier to maintain in the long run.

---

The only difference i would make to the others suggestions is the use of .outerHeight(true); .

This retains the margins and padding of the container you are trying to measure instead of just the innerHeight(no margins or padding) of the element.

function forceHeights() {
    var blocks = $('.main-tabs [class*="content-"]');
    var maxHeight = 0;

    blocks.each(function(i, elem) {

        if ($(this).outerHeight(true) > maxHeight) {
            // Grabs margins and padding of container
            maxHeight = $(this).outerHeight(true);
        }

    })

    blocks.height(maxHeight);
}


$(window).on('load',function() {

    // Run on load to cater for
    // images that may adjust container size
    forceHeights();

})

$(window).on('resize', function() {

    // Timer to delay function from executing if
    // window still resizing
    if (resizeTimer) {
        clearTimeout(resizeTimer);   // clear any previous pending timer
    }

    resizeTimer = setTimeout(forceHeights, 500);

})