jQuery Dival Высота Div

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>

Как я могу убедиться, что все div, помеченные как "sameHeight", имеют ту же высоту, что и их аналоги в другом div?

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

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

EDIT

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

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

Диваны "box" сидят рядом.

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

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

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

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

РЕДАКТИРОВАТЬ 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.

Кроме того, этот ответ может показывать вам некоторые другие варианты.

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

Answer 2

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

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

Answer 3

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