jQuery Equal Height Div

Question

Se ho il seguente markup;

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

Come posso assicurare che tutti i div contrassegnati come "sameHeight" hanno la stessa altezza come le loro controparti in altri div?

Ho dato un'occhiata al plugin equalHeights ma questo presuppone che tutti i div parallelamente siano nello stesso genitore. Ne ho bisogno uno che possa attraversare i genitori o permettermi di specificare i genitori.

Esiste una cosa del genere o devo scriverlo?

EDIT

mi sembra di avere causato una certa confusione nella mia spiegazione quindi spero che questo cancella le cose un po '.

Guardando il nuovo markup, il contenitore è una semplice scatola.

Le immersioni "scatola" sono affiancate.

Ciascun div di altezza uguale si trova quindi uno sotto l'altro all'interno del relativo genitore.

La cosa che sto cercando di risolvere è di avere ciascuno degli stessi pesi che corrispondono al lato opposto della stessa altezza.

dovrebbe assomigliare a una griglia immagino w/out utilizzando una griglia.

Spero che questo aiuti.

EDIT 2

Questo è finora quello che ho messo a punto, ma c'è un modo migliore?

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

In primo luogo, si sono probabilmente consapevoli solo un elemento dovrebbe avere qualsiasi id attributo. Quindi ho cambiato i selettori come se fossero classi nelle classi sottostanti. Anche se non si può prestare attenzione agli standard del W3C, i browser o le API JavaScript, ecc. Possono fare affidamento su questo comportamento e non lavorare ora o in 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: Se si desidera che tutti di essere alla stessa altezza, nonostante la loro div genitore, questo è ciò che si desidera.

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

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

     }); 

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

Questo li imposterà per essere l'altezza dell'elemento div più alto, per genitore.

Inoltre, this answer potrebbe mostrare alcune altre opzioni.

Nota anche che se il contenuto all'interno cambia di nuovo (forse tramite JavaScript), sarà necessario chiamare di nuovo questo, o metterlo in un setInterval() quale Non consiglia.

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> 

e in JavaScript utilizzando jQuery scrittura:

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

Answer 3

Perché non usare solo un tavolo?

Imho, fare il layout in javascript come questo è molto più malvagio che eseguire il layout tramite tabelle. Cosa succede se l'utente ridimensiona il proprio browser? Devi catturare l'evento di ridimensionamento, ma poi si ottiene un certo rallentamento durante il ridimensionamento che rende il tuo sito Web non raffinato.