На странице есть несколько контейнеров div.secondary_banner_box, внутри которых типовые элемнты: div.title, div.subtitle и div.text (ну и прочее, что нам неинтересно). Нужно, чтобы независимо от количества контента в любом из элементов div..secondary_banner_box все они начинались (и, следовательно, заканчивались) горизонтально на одном уровне соответственно класса элемента. Заумно как-то получилось...
В общем, чтобы все элементы одного класса были одинаковы по высоте. Есть функция, которая это делает (получает в данном примере ".secondary_banner_box", как первый параметр, а как второй -- один из классов внутренних элементов:
function alterHeights( container, element ) {
var boxes = jQuery(container).length; //считаем сколько всего родительских контейнеров
var heights = [];
for ( var i = 0; i < boxes; i++ ){
heights[i] = jQuery( '#box_' + (i+1) + ' ' + element ).height(); //определяем высоты всех элементов
}
var max = 0;
for ( i = 0; i < boxes; i++) {
if ( heights[i] > max ) max = heights[i]; //определеяем максимальную высоту среди всех элементов
}
for ( i = 0; i < boxes; i++ ) {
jQuery( '#box_' + (i+1) + ' ' + element ).height(max); // выставялем эту максимальную высоту для всех элементов
}
}
Вроде всё ОК и часто отрабатывает эта конструкция как надо. Но часто и не нормально. Ненормальность заключается, в том, что "jQuery( '#box_' + (i+1) + ' ' + element ).height()" возвращает значение, большее, чем там реально должно быть.
Например, на
этой странице, если функция не выполняется, то высота самого высокого элемента среди .title ( а именно #box_6 .title ) равняется 69px. Если же функция выполняется, максимальная высота становится 96px.
Скриншот без выполнения функции:
Скриншот с выполнением функции:
В чём причина такого странного поведения -- мне непонятно, поэтому прошу помощи.