jquery height() метод возвращает строку-высоту

Question

У меня есть следующая функция, в которой у меня есть три столбца. Javascript должен найти самый большой столбец и установить высоту других столбцов на эту высоту.

$(document).ajaxComplete(function(){ 
    function fixScheduleHeights(){ 
     content1 = $('.schedule_content_holder').first(); 
     content2 = content1.next(); 
     content3 = content2.next(); 

     content1Height = content1.height(); 
     content2Height = content2.height(); 
     content3Height = content3.height(); 

     biggestScheduleHeight = Math.max(content1Height, content2Height, content3Height); 

     $('.schedule_content_holder').height(biggestScheduleHeight); 
    } 
    fixScheduleHeights(); 
}); 

Я пробовал код выше, и он работает, если самый большой столбец - это первый столбец. он не работает, если самый длинный столбец - второй столбец. Я поставил следующий код в целях отладки:

alert(content2height); 

и насторожило значение 16, которое не должно быть значение content2height. Посмотрев инспектор, я понял, что проблема в том, что тело имеет свойство css строки-высоты: 16 пикселей;

Почему Content2Height = 16 и как его изменить так, чтобы он был равен фактической высоте?

Answer 1

Существует более простой и надежный способ делать то, что вы делаете, что не зависит от позиции или количества ваших столбцов, потому что я думаю, что ваши звонки на .next() не возвращают то, что, по вашему мнению, они возвращают. next() возвращает следующего брата в дереве DOM (необязательно отфильтровывается с помощью селектора, и вы не предоставляете его). Вы можете вернуть <br />, <span> или что-нибудь еще.

$(document).ajaxComplete(function(){ 
    var $columns = $('.schedule_content_holder'); 
    var maxHeight = 0; 

    $columns.each(function() { 
     maxHeight = Math.max(maxHeight, $(this).height()); 
    }); 

    $columns.height(maxHeight); 
});