均衡元素高度功能不起作用

Question

我有3個塊，我希望所有3個都具有相同的高度，如果其中一個塊有更多的內容，其餘的塊應調整高度，以更多的內容。每塊內部還有另外3個塊，我稱之爲函數。調用函數後，所有內部的3個塊應該是相同的高度，從而產生相同高度的父塊。父塊內的塊有填充和餘量，但我用border-box來包含填充高度。

我做了一個功能，但它不能很好地工作。有時它有效，有時候不行，這很奇怪。

$.fn.equalizeHeights = function() { 
    var maxHeight = 0; 

    this.each(function() { 
    if ($(this).outerHeight() > maxHeight) { 
     maxHeight = $(this).outerHeight(); 
    } 
    }); 

    return this.each(function() { 
    $(this).animate({ 
     height: maxHeight 
    }, 300); 
    }); 
}; 



function boxesHeight() { 
    $('.main-blocks .block .icon').equalizeHeights(); 
    $('.main-blocks .block .summary').equalizeHeights(); 
    $('.main-blocks > .block').equalizeHeights(); 
} 



$(window).load(function() { 

    boxesHeight(); 

}); 

Answer 1

我猜你需要使用數組來存儲的值，只是從它返回的次數最多：

$.fn.equalizeHeights = function() { 
    var maxHeight = []; // change to array to store the values. 

    this.each(function() { 
     maxHeight.push($(this).outerHeight()); 
    }); 

    return this.each(function() { 
    $(this).animate({ 
     height: Math.max.apply(Math, maxHeight) // <----get the highest value 
    }, 300); 
    }); 
};