Wenn ich das folgende Markup habe;

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

Wie kann ich sicherstellen, dass alle Divs, die als "sameHeight" markiert sind, dieselbe Höhe haben wie ihre Gegenstücke in der anderen Div?

Ich habe mir das equalHeights-Plugin angesehen, aber das setzt voraus, dass sich alle Divs nebeneinander im selben übergeordneten Element befinden. Ich brauche einen, der entweder Eltern überqueren oder mir erlauben kann, Eltern anzugeben.

Gibt es so etwas oder muss ich es schreiben?

BEARBEITE

Ich habe anscheinend einige Verwirrung in meiner Erklärung verursacht, also hoffe ich, dass dies die Dinge ein wenig aufklärt.

Beim Betrachten des neuen Markups handelt es sich bei dem Container um eine einfache Box.

Die "Box" -Divs sitzen nebeneinander.

Jeder sameheight div befindet sich dann untereinander in seinem übergeordneten Element.

Das, was ich zu lösen versuche, ist, dass jede der gleichen Höhen mit der gegenüberliegenden Seite der gleichen Höhe übereinstimmt.

s sollte wie ein Gitter aussehen, ohne ein Gitter zu verwende

Ich hoffe das hilft

EDIT 2

Das ist soweit, was ich mir ausgedacht habe, aber gibt es einen besseren Weg?

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 });
        }
    }
}