在javascript中多個li的高度相同

Question

我是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); 
} 

Answer 1

window.addEventListener("resize", equl_heigh);

喝彩！

Answer 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); 
} 

此外，由於調整大小事件可以以較高的速率被解僱所以試試這個throttling trick爲好。