jQuery Equal Height Divs

Question

Si j'ai le balisage suivant;

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

Comment puis-je faire en sorte que tous les divs marqués comme « sameHeight » sont la même hauteur que leurs homologues dans l'autre div?

J'ai regardé le plugin equalHeights mais cela suppose que tous les divs côte à côte sont dans le même parent. J'ai besoin d'un qui peut traverser les parents ou permettez-moi de préciser les parents.

Y at-il une telle chose ou dois-je écrire?

EDIT

Il me semble avoir causé une certaine confusion dans mon explication et j'espère que cela efface les choses un peu.

En regardant le nouveau balisage, le conteneur est une simple boîte.

Les divs « boîte » sont assis côte à côte.

Chaque sameheight div se trouve alors l'un sous l'autre dans son parent.

La chose que j'essaie de résoudre est d'avoir chacun des mêmes HH qui correspondent à son côté opposé de la même hauteur.

ça devrait ressembler à une grille je devine w/out en utilisant une grille.

J'espère que cela aide.

EDIT 2

C'est à ce jour ce que je suis venu avec mais est-il une meilleure façon?

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

Tout d'abord, vous savez probablement qu'un seul élément doit avoir une id attribut. J'ai donc changé les sélecteurs comme s'ils étaient des classes aux classes ci-dessous. Même si vous ne vous souciez pas des standards du W3C, les navigateurs, les API JavaScript, etc. peuvent s'appuyer sur ce comportement et ne pas fonctionner maintenant ou dans le futur.

$(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' }); 


    }); 
}); 

Remarque: Si vous voulez qu'ils soient tous à la même hauteur malgré leur div parent, c'est ce que vous voulez. Cela leur donnera la hauteur de l'élément div le plus grand, par parent. Cela leur donnera la hauteur de l'élément div le plus grand. En outre, this answer peut également vous montrer d'autres options.

Notez aussi que si le contenu change à l'intérieur de nouveau (peut-être via JavaScript), vous devez appeler ce nouveau, ou le mettre dans un setInterval() que je ne suis pas recommander.

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> 

et en utilisant JavaScript jQuery écrire:

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

Answer 3

Pourquoi ne pas simplement utiliser une table? Imho, faire une mise en page en javascript, c'est beaucoup plus mal que de faire la mise en page via des tables. Que se passe-t-il si l'utilisateur redimensionne son navigateur? Vous devez capturer l'événement de redimensionnement, mais alors vous obtenez une certaine laggyness lors du redimensionnement qui rend votre site Web non poli.