jQuery para ajustar a altura de elementos HTML

Em várias vezes que precisei ajustar a altura de elementos HTML cujo conteúdo é variável, reescrevia um código javascript utilizando jQuery para comparar a altura dos elementos e encontrar o maior valor, depois definia esse valor para a altura de todos os elementos. Embora seja simples, a cada vez tinha que refazer o código. Para tornar a operação mais simples, escrevi uma função jQuery:

[code language=”javascript”]jQuery.fn.extend({
adjustHeight: function(){
var element = $(this);
var finalHeight = 0;
$.each(element,function(i,compare){
if($(compare).height() > finalHeight){
finalHeight = $(compare).height();
}
});
$.each(element,function(i,change){
$(change).height(finalHeight);
});
return $(this);
}
});[/code]

A necessidade de ajustar a altura, muitas vezes, é devido a outros efeitos como bordas e cor de fundo, como neste exemplo:

Usando a função adjustHeight, todos os elementos serão ajustados para ficar com a mesma altura.

[code language=”javascript”]$(‘.text, .info, .links’).adjustHeight();[/code]

[code language=”html”]<div class="container">
<div class="text" style="height:500px;">
<b>Text</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas est et neque ultricies ut venenatis ante iaculis.
Fusce odio purus, pretium sit amet egestas eget, luctus id enim. Nulla tempor nibh eu diam dapibus ut iaculis augue lacinia.
</div>
<div class="info" style="height:500px;">
<b>Info</b>
Nullam in risus a risus vehicula imperdiet nec eget ante. Pellentesque non sagittis dui.
</div>
<div class="links" style="height:500px;">
<b>Links</b>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>[/code]

Resultando em melhor disposição dos elementos.

Fiz o adjustHeightv2 com algumas modificações em resposta ao comentário do Rodrigo.

Para alterar a unidade de pixels para rem, é preciso retirar as barras de comentário das linhas finalHeight = finalHeight / 16; e $(change).css({"height":finalHeight+"rem"});, comentando a linha imediatamente acima desta última.

Mas a troca de unidade não afeta a medida dos elementos quando a janela do navegador é redimensionada. Para isso, é preciso efetuar o bind do adjustHeightv2 no window resize, ver linhas 41 a 43.

[code languege=”javascript”]jQuery.fn.extend({
adjustHeightv2: function(){
var element = $(this);
var finalHeight = 0;

/*
* Clear previously set height
* Needed if binding to window resize
*/
$.each(element,function(i,change){
$(change).css({"height":"initial"});
});

/* Find new height */
$.each(element,function(i,compare){
if($(compare).height() > finalHeight){
finalHeight = $(compare).height();
}
});

/*
* Convert finalHeight from pixels into rem
* Adjust rembase accordingly (14 or 16?)
*/
//finalHeight = finalHeight / 16;

/* Set new height */
$.each(element,function(i,change){
$(change).css({"height":finalHeight+"px"});
//$(change).css({"height":finalHeight+"rem"});
});

return $(this);
}
});

$(function(){
$(‘.text, .info, .links’).adjustHeight();
});

$(window).on(‘resize’, function(){
$(‘.text, .info, .links’).adjustHeight();
});[/code]