jQuery Равные высоты Divs

Question

Если у меня есть следующая разметка;

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

Как я могу гарантировать, что все дивы помечены как «sameHeight» одни и те же высоты, как и их коллеги в других DIV?

Я посмотрел плагин equalHeights, но предполагает, что все divs бок о бок находятся в одном родителе. Мне нужен тот, который может пересекать родителей или разрешать мне указывать родителей.

Есть ли такая вещь или мне нужно ее написать?

EDIT

Я, кажется, вызвало некоторое замешательство в своем объяснении, так что я надеюсь, что это очищает вещи немного.

Рассматривая новую разметку, контейнер представляет собой простую коробку.

«Бокс» Дивы сидят бок о бок.

Каждый такой же элемент div сидит один под другим в своем родителе.

Вещь, которую я пытаюсь решить, состоит в том, чтобы иметь каждый из тех же высот, которые соответствуют противоположной стороне той же высоты.

он должен выглядеть как сетка, я думаю, w/out, используя сетку.

Надеюсь, это поможет.

EDIT 2

Это до сих пор, что я придумал, но есть лучший способ?

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

Во-первых, вы, вероятно, знаете только один элемент должен иметь какой-либо один id атрибут. Поэтому я изменил селектора так, как если бы они были классами классов ниже. Несмотря на то, что вы не можете заботиться о стандартах W3C, браузерах или JavaScript API и т. Д., Вы можете полагаться на это поведение и не работать сейчас или в будущем.

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


    }); 
}); 

Примечание: Если вы хотите, чтобы они все были на той же высоте, несмотря на их родительский DIV, это то, что вы хотите.

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

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

     }); 

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

Это установит их для всех, чтобы высота была самой высокой, для элемента родительского div.

Также this answer может показать вам другие варианты.

Примечание также, что если содержание внутри меняется снова (возможно, с помощью JavaScript), вам нужно будет назвать это снова, или положить его в setInterval(), который я не рекомендую.

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> 

и в JavaScript с помощью JQuery записи:

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

Answer 3

Почему бы не просто использовать стол?

Imho, делать макет в javascript, как это гораздо более злой, чем делать макет через таблицы. Что произойдет, если пользователь изменит размер своего браузера? Вы должны захватить событие изменения размера, но затем вы получаете определенную задержку при изменении размера, что делает ваш сайт неполированным.