javascript中多个li的高度相同答案

【问题标题】：same height of multiple li in javascriptjavascript中多个li的高度相同
【发布时间】：2016-05-13 15:43:31
【问题描述】：

我是 JavaScript 新手。如果我们刷新页面，它工作正常，但当我们调整窗口大小时它不工作。

$(window).load(function(){
    equl_height();
});

$(window).resize(function(){
    equl_height();
}); 


function equl_height () {
    var highestBox = 0;
    $('ul li').each(function(){  
        if($(this).height() > highestBox){  
            highestBox = $(this).height();  
        }
    });    
    $('ul li').height(highestBox);
}

【问题讨论】：

你能分享一个小提琴jsfiddle.net吗？还是在equl_height方法中放一个控制台日志来检查该方法是否被执行？

标签： javascript height

【解决方案1】：

window.addEventListener("resize", equl_heigh);

干杯！

【讨论】：

你为什么把“equl_heigh”作为一个字符串？如果 jquery 代码不起作用，为什么 addEventListener 会起作用？
你好吉米什它不工作 $(window).load(function(){ equl_height(); }); window.addEventListener("resize", "equl_height");函数 equl_height () { var highbox = 0; $('ul li').each(function(){ if($(this).height() >highestBox){highestBox = $(this).height(); } }); $('ul li').height(highestBox); }
$(window).load(function(){ equl_height(); }); $(window).resize(function(){ equl_height(); }); window.addEventListener("resize", equl_height);函数 equl_height () { var highbox = 0; $('ul li').each(function(){ if($(this).height() >highestBox){highestBox = $(this).height(); } }); $('ul li').height(highestBox); } 仍然无法正常工作请帮助

【解决方案2】：

问题在于如何测量li 的高度。使用scrollHeight 而不是height()。检查这个fiddle。

用

更新你的equl_height方法

function equl_height () {
    console.log( "resizing" );
    var highestBox = 0;
    $('ul li').each(function(){
        //var height = $(this).outerHeight();
        var height = $(this)[0].scrollHeight;
        if(height > highestBox){  
            highestBox = height;  
        }
    });    
    $('ul li').outerHeight(highestBox);
}

另外，由于 resize 事件可以以更高的频率触发，所以也可以试试这个throttling trick。

【讨论】：

“不要覆盖 window.onresize 函数” - 问题中显示的代码（当前）不使用 onresize，它使用了相关的 jquery 方法。跨度>