javascript - jQuery设置di​​v高度

Question

使用下面的函数，它允许我使用特定类将 div 设置为最大高度，但是我需要调整它以允许我动态设置每一行的高度。

示例:

row 中的 menuBoxesParagraph 框的高度可能与 rowX 中的框不同，我需要能够获得 max .menuBoxesParagraph 每个“行” 的高度，然后能够根据max 设置行高 -我可能有一个 298 像素高的 .menuBoxesParagraph 框 - 这将是该特定行中最高的框 - 行高应该是那个高度

<div class="row">
    <div class="menu1 menuBoxesParagraph">
        <p>Content Row</p>
    </div>
</div>

<div class="rowX">
    <div class="menu1 menuBoxesParagraph">
        <p>Content Row X</p>
    </div>
</div>

当前的 jQuery:

 $(document).ready(function() {
      var max = -1;
    $('.menuBoxesParagraph').each(function() {
    var h = $(this).height(); 
    max = h > max ? h : max;   
    });
    $(".menuBoxesParagraph").css("height",max+"px");

    }); 

CSS:

.menuBoxesParagraph{
    width: 25%;
    border: 10px solid #000;
    margin: 2% 1% 0px 0px;
    padding: 5px;
    text-align: center;
}
.menuBoxesParagraph:before, .menuBoxesParagraph:after { content: ""; display: table; }
.menuBoxesParagraph:after { clear: both; }
.menuBoxesParagraph { zoom: 1; }

Answer 1

您将 border 和 padding CSS 设置为 .menuBoxesParagraph 因此要计算它的实际高度，您应该使用 outerHeight()功能。正如我所理解的那样，你想要有行，它们的高度设置为 .menuBoxesParagraph 的最大高度，所以对于每个 row 你应该调用这个函数。比如 FIDDLE

$(document).ready(function() {
    var max = -1;
    $('.row .menuBoxesParagraph').each(function() {
    var h = $(this).outerHeight(); 
    max = h > max ? h : max;   
    });
    $(".row .menuBoxesParagraph").outerHeight(max+"px"); 
   $(".row").css("height",max+"px");

    var max1 = -1;
    $('.row1 .menuBoxesParagraph').each(function() {
    var h = $(this).outerHeight(); 
    max1 = h > max1 ? h : max1;   
    });
    $(".row1 .menuBoxesParagraph").outerHeight(max1+"px"); 
    $(".row1").css("height",max1+"px");
    
    var max2 = -1;
    $('.row2 .menuBoxesParagraph').each(function() {
    var h = $(this).outerHeight(); 
    max2 = h > max2 ? h : max2;   
    });
    $(".row2 .menuBoxesParagraph").outerHeight(max2+"px"); 
    $(".row2").css("height",max2+"px");
    
    var max3 = -1;
    $('.row3 .menuBoxesParagraph').each(function() {
    var h = $(this).outerHeight(); 
    max3 = h > max3 ? h : max3;   
    });
    $(".row3 .menuBoxesParagraph").outerHeight(max3+"px"); 
    $(".row3").css("height",max3+"px");
});