Если у меня есть следующая разметка;
<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 });
}
}
}
Во-первых, вы, вероятно, знаете, что только один элемент должен иметь один атрибут 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()
, что я не рекомендую.
Почему бы просто не использовать таблицу?
Имхо, делать разметку в javascript, как это, гораздо хуже, чем делать разметку с помощью таблиц. Что произойдет, если пользователь изменит размер своего браузера? Вы должны зафиксировать событие изменения размера, но тогда вы получите некоторую задержку при изменении размера, из-за чего ваш сайт будет выглядеть неотшлифованным.
<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" });
});