javascript - 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的值。查看检查器后，我发现问题是 body 有一个 css 属性 line-height: 16px;

为什么 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);
});