jQuery Равные Отделения Высоты

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

<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" являются той же высотой как свои дубликаты в другом отделении?

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

Есть ли такая вещь, или я должен записать это?

Править

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

Смотря на новую разметку, контейнер является простым полем.

Отделения "поля" сидят рядом.

Каждое sameheight отделение затем сидит один под другим в его родителе.

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

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

Я надеюсь, что это помогает.

РЕДАКТИРОВАНИЕ 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 });
        }
    }
}
5
задан griegs 12 April 2010 в 05:05
поделиться

3 ответа

Во-первых, вы, вероятно, знаете, что только один элемент должен иметь один атрибут 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(), что я не рекомендую.

8
ответ дан 14 December 2019 в 04:33
поделиться

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

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

0
ответ дан 14 December 2019 в 04:33
поделиться
<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" });
});
0
ответ дан 14 December 2019 в 04:33
поделиться
Другие вопросы по тегам:

Похожие вопросы: