Question

我有一个函数可以调整div的大小，具体取决于具有相同类的其他div的高度（以像素为单位）：

<script type="text/javascript">

    function resizeTheDivs(tag){
        // first get the tags to adjust
        var $tags = $('.' + tag);
        var $new_height = 0;
        // find out which one is largest
        $('.' + tag).each(function(){
            $(this).height() > $new_height ? $new_height = $(this).height() : null;
        });
        // make all others that height
        $tags.height($new_height);
        // I console.log($new_height) here sometimes
    }

    // resize divs on document load
    $(document).ready(function(){
        resizeTheDivs('the-class');
    });
    // resize divs on window resize
    $(window).resize(function () {
        resizeTheDivs('the-class');
    });

</script>

div在页面加载时正确调整大小，但当console.log($new_height)从窗口调整大小功能触发时，$new_height不会更改。

上下文：有3个div（左侧浮动，因此彼此相邻，宽度为33％）包含p标记中的文本。因此，当我调整浏览器宽度时，文本变得“更长”，但是javascript函数没有达到div的新高度。

有什么想法吗？

Answer 1

在测量之前，您需要将height重置为auto，否则它将始终返回您在$(document).ready中设置的固定值：

function resizeTheDivs(tag){
    // first get the tags to adjust
    var $tags = $('.' + tag);
    var $new_height = 0;
    // find out which one is largest
    $('.' + tag).each(function(){
        $(this).removeAttr('style');
        $(this).height() > $new_height ? $new_height = $(this).height() : null;
    });
    // make all others that height
    $tags.height($new_height);
    // I console.log($new_height) here sometimes
}

在窗口调整大小时获取div的高度

1 个答案: