HTML Div Equal Height

Question

I have made this javascript code, but i think i am repeating my self, so any suggestions to make this code more better and optimized.

var countHeight = [];
$('.box').each(function() {
    countHeight.push( $(this).outerHeight() );
});
var maxValueInArray = Math.max.apply(Math, countHeight);

$('.box').each(function() {

  $(this).css('height', maxValueInArray+'px');

});

http://stackoverflow.com/questions/4795318/map-get-confusion/4795529#4795529 this might help — jvecsei, Nov 13 '15 at 19:06
There is no problem in code.. just need a little more optimize version of it — Amanullah Tanweer, Nov 13 '15 at 19:20
When looking for a code review, please use the http://codereview.stackexchange.com/ site. — Shane, Nov 13 '15 at 20:36

score 0 · Answer 1 · answered Nov 13 '15 at 19:08

This is one set of optimization i can think of

$(function(){

var maxHeight = 0;
$('.box').each(function() {
    var h = $(this).outerHeight();
    if(h>maxHeight) maxHeight=h;
});

$('.box').each(function() {
  $(this).css('height', maxHeight+'px');
});

});

Fiddle

score 0 · Accepted Answer · answered Nov 14 '15 at 00:17

Here is slightly shorter version. No need to use second loop to add the height to each .box element.

var countHeight = [];
$('.box').each(function() {
    countHeight.push( $(this).outerHeight() );
}).css('height', Math.max.apply(Math, countHeight)+'px');

HTML Div Equal Height

2 Answers2