0 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.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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:

?
1
2
3
4
5
6
7
8
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.