0

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.

Noth Wild
  • 11
  • 2
  • 4
  • 2
    There may be a pure `css` solution for what you are trying to achieve. Consider this as a cleaner solution. Although this may answer your question? http://stackoverflow.com/questions/6781031/use-jquery-css-to-find-the-tallest-of-all-elements – Marian Rick Sep 13 '16 at 18:58

5 Answers5

2

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);
    });
Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
  • Sorry I can not change the names of the (content-1, etc.) because they are associated with css: `.main-tabs .tabs > input.tab-selector-1:checked ~ .content .content-1 {...}`.Сhanges will lead to the failure of the "tabs". – Noth Wild Sep 13 '16 at 19:21
  • You don't need to change the names in your HTML, you would just *add* a class called "content-child" that all occurrences would share. *Or* you can use a wildcard selector as plong0 mentioned in his answer, like so: `$('.main-tabs [class*="content-"]')`. I've updated my answer to be a bit more descriptive. – Tyler Roper Sep 13 '16 at 19:28
0

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);
plong0
  • 2,140
  • 1
  • 19
  • 18
0
  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.

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

vadjs
  • 325
  • 3
  • 16
0

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>
arnolds
  • 778
  • 6
  • 12
0

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);

})
Matthew Tilley
  • 131
  • 10