View Comments

Hemos creado esta función de jQuery para igualar varios elementos HTML basándonos en clases CSS. Muy útil para igualar la altura de bloques o cajas.

jQuery.fn.equalHeights = function() {
	var maxHeight = 0;
	// get the maximum height
	this.each(function(){
		var $this = jQuery(this);
		if ($this.height() > maxHeight) { maxHeight = $this.height(); }
	});
	// set the elements height
	this.each(function(){
		var $this = jQuery(this);
		$this.height(maxHeight);
	});
};

Ahora podemos llamar a esa función cuando se carga la página con estas líneas:

jQuery(window).load(function() {
	var classes = new Array("className1","className2" );
	classes.each(function(className) {
        				var selector = '.' + className;
        				jQuery(selector).equalHeights();
        		});
        	
});

Esto igualará la altura de todos los elementos que tengan la clase CSS className1. Hará lo mismo para todos los elementos que tengan la clase CSS className2

NOTA IMPORTANTE: recuerda usar siempre $(window).load en lugar de $(document).ready porque si los elementos contienen imágenes estas no estarán cargadas aún cuando se ejecuta $(document).ready y obtendríamos la altura del elemento sin tener en cuenta la altura de la imagen.