HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Equal heights in pure JS

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
equalheightspure

Problem

I'm pushing myself to learn pure JavaScript, so this morning I wrote an equal heights script in jQuery and then converted it to JavaScript. It works, but I'm using two for loops. Is there a better or more efficient way to write this code, maybe by finding a way to remove the second for loop?

I've created a jsfiddle to make is a little easier to test.

var  maxHeight = -1
,    elems = document.getElementsByClassName("features");

for( var i = 0; i  elems[i].offsetHeight ? maxHeight : elems[i].offsetHeight;
}

for( var i = 0; i < elems.length; i++ )
{
    elems[i].style.height = maxHeight + "px";
}

Solution

The two loops are necessary:
to know the max value, you need to make one complete pass.
There's no way around it.
Only after you know the max value,
after checking all items,
you need a second pass to set the height to the max.

In terms of writing style,
there isn't really a standard,
and it may be a matter of taste,
but in any case I prefer this way:

var maxHeight = -1;
var elems = document.getElementsByClassName("features");

for (var i = 0; i  elems[i].offsetHeight ? maxHeight : elems[i].offsetHeight;
}

for (var i = 0; i < elems.length; i++) {
    elems[i].style.height = maxHeight + "px";
}

Code Snippets

var maxHeight = -1;
var elems = document.getElementsByClassName("features");

for (var i = 0; i < elems.length; i++) {
    maxHeight = maxHeight > elems[i].offsetHeight ? maxHeight : elems[i].offsetHeight;
}

for (var i = 0; i < elems.length; i++) {
    elems[i].style.height = maxHeight + "px";
}

Context

StackExchange Code Review Q#69246, answer score: 3

Revisions (0)

No revisions yet.