jQuery Equal Height Divs

Question

Si tengo el siguiente marcado;

<div id="container"> 
    <div id="box"> 
    <div id='sameHeight'>One<br>two<br>three</div> 
    <div id='sameHeight'>four</div> 
    <div id='sameHeight'>five</div>   
    <div> 
    <div id="box"> 
    <div id='sameHeight'>four</div> 
    <div id='sameHeight'>six</div> 
    <div id='sameHeight'>seven<br>eight</div> 
    <div> 
</div> 

¿Cómo puedo asegurar que todos los divs marcados como "sameHeight" son la misma altura que sus contrapartes en el otro div?

He echado un vistazo al complemento equalHeights pero supone que todos los divs uno al lado del otro están en el mismo elemento principal. Necesito uno que pueda atravesar a los padres o permitirme especificar padres.

¿Existe tal cosa o debo escribirla?

EDITAR

que parecen haber causado una cierta confusión en mi explicación, así que espero que esto aclare las cosas un poco.

Al mirar el nuevo marcado, el contenedor es una caja simple.

Las divs de "caja" se encuentran una al lado de la otra.

Cada div sameheight se sienta uno debajo del otro dentro de su padre.

Lo que estoy tratando de resolver es tener cada una de las mismas Alturas que coincidan con su lado opuesto a la misma altura.

debe parecer una cuadrícula, supongo que sin usar una cuadrícula.

Espero que esto ayude.

EDIT 2

Esta es hasta ahora lo que he llegado con pero hay una manera mejor?

function SetHeights() { 
    var numLines = $('#container>div:eq(0) .sameHeight').length; 

    for (var t = 0; t < numLines; t++) { 
     var leftHeight = $('#container>div:eq(0) .sameHeight:eq(' + t + ')').outerHeight(); 
     var rightHeight = $('#container>div:eq(1) .sameHeight:eq(' + t + ')').outerHeight(); 

     if (leftHeight > rightHeight) { 
      $('#container>div:eq(1) .sameHeight:eq(' + t + ')').css({ height: leftHeight }); 
     } 
     else { 
      $('#container>div:eq(0) .sameHeight:eq(' + t + ')').css({ height: rightHeight }); 
     } 
    } 
} 

Answer 1

En primer lugar, usted probablemente sabe más que un elemento debe tener cualquier id atributo. Así que cambié los selectores como si fueran clases a clases a continuación. Aunque no le importe los estándares del W3C, los navegadores o la API de JavaScript, etc. pueden confiar en este comportamiento y no funcionar ahora o en el futuro.

$(document).ready(function() {  
     $('div.parentDiv > div').each(function() { 

     var $sameHeightChildren = $(this).find('.sameHeight'); 
     var maxHeight = 0; 

     $sameHeightChildren.each(function() { 
      maxHeight = Math.max(maxHeight, $(this).outerHeight()); 
     }); 

     $sameHeightChildren.css({ height: maxHeight + 'px' }); 


    }); 
}); 

Nota: Si desea que todos sean de la misma altura a pesar de su div padre, esto es lo que desea.

$(document).ready(function() {  
     var $sameHeightDivs = $('.sameHeight'); 
     var maxHeight = 0; 
     $sameHeightDivs.each(function() { 

      maxHeight = Math.max(maxHeight, $(this).outerHeight()); 

     }); 

     $sameHeightDivs.css({ height: maxHeight + 'px' }); 
}); 

Esto los establecerá como todos a la altura del elemento div más alto por padre.

Además, this answer puede mostrarle algunas otras opciones.

Nota también que si el contenido en el interior cambia otra vez (tal vez a través de JavaScript), tendrá que llamar a este nuevo, o ponerlo en un setInterval() cual No recomendar.

Answer 2

<div id='parentDiv'> 
    <div> 
     <div id='sameHeight'>One<br>two<br>three</div> 
     <div id='sameHeight'>four</div> 
     <div id='sameHeight'>five</div>   
    <div> 
    <div> 
     <div id='sameHeight'>four</div> 
     <div id='sameHeight'>six</div> 
     <div id='sameHeight'>seven<br>eight</div> 
    <div> 
</div> 

y en JavaScript usando jQuery escritura:

$(document).ready(function() {  
    $("div.parentDiv div div.sameHeight").css({ height: "100px" }); 
}); 

Answer 3

¿Por qué no usar una tabla?

Imho, hacer el diseño en javascript como este es mucho más malo que hacer el diseño a través de tablas. ¿Qué sucede si el usuario cambia el tamaño de su navegador? Tienes que capturar el evento de cambio de tamaño, pero luego obtienes cierta holgazanería al cambiar el tamaño, lo que hace que tu sitio web no se vea pulido.