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:

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

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

Text
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.
Info
Nullam in risus a risus vehicula imperdiet nec eget ante. Pellentesque non sagittis dui.

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

$('.text, .info, .links').adjustHeight();
<div class="container">
	<div class="text" style="height:342px;">
		<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:342px;">
		<b>Info</b>
		Nullam in risus a risus vehicula imperdiet nec eget ante. Pellentesque non sagittis dui.
	</div>
	<div class="links" style="height:342px;">
		<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>

Resultando em melhor disposição dos elementos.

Text
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.
Info
Nullam in risus a risus vehicula imperdiet nec eget ante. Pellentesque non sagittis dui.

Deixe uma resposta