jQuery设置di​​v高度

Question

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

例：

该menuBoxesParagraph内框row可能是一个不同的高度，然后内盒rowX我需要能够获得max .menuBoxesParagraph高度为每个“行”，然后可以根据任何的设置行高度max是-我可能会有一个.menuBoxesParagraph框，它的高度为298px-这将是该特定行中的最高框-然后该行的高度应为该高度

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

Answer 2

您只需替换：

$(document).ready(function() {
      var max = -1;
    $('.menuBoxesParagraph').each(function() {
        var h = $(this).outerHeight(); 
        max = h > max ? h : max;   

        $(this).css("height",max+"px");
   });
});

Answer 3

您好，您需要在脚本中进行更改，因为您需要对每一行应用高度，并且已经将css应用代码放到了作用域之外，实际上您在这里得到了每一行的DOM元素，我已经给出了示例代码示例

另一件事是，您必须将三元条件包装在 方括号中，以检查值的比较

这是您需要获得的零钱

查看

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

这是演示工作代码

演示

---

更新的答案

我试图将高度应用于两个不同的div，这是您期望的结果

  $(document).ready(function() { var tmpMax = -1; $('.menuBoxesParagraph').each(function() { debugger; if($(this).height()>tmpMax){ tmpMax = $(this).height(); } }); $(".menuBoxesParagraph").css("height",tmpMax+"px"); }); 

 .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; } 

 <div class="row"> <div class="menu1 menuBoxesParagraph" style="height:100px;"> <p>Content Row</p> </div> </div> <div class="rowX"> <div class="menu1 menuBoxesParagraph" style="height:300px;"> <p>Content Row X</p> </div> </div> 

这是更新的演示更新的演示

Answer 4

您需要做的是单独制作每行等高的盒子，对吗？ 如果是这样，那么这段代码就可以完成任务。

您需要做的就是将每个行框分别分组，然后应用高度逻辑。

var rowsArr=[]
var boxesArr=[]
var prevParent;
allBoxes=$('.menuBoxesParagraph')
allBoxes.each(function(i) {
    if(prevParent && prevParent[0]!=$(this).parent()[0]){
        rowsArr.push(boxesArr.slice())
        boxesArr=[]
    }
    boxesArr.push($(this)[0]);
    prevParent=$(this).parent();
    if(i==allBoxes.length-1){
        rowsArr.push(boxesArr.slice())
    }
});

for(i=0;i<=rowsArr.length;i++){
    thisBoxes=$(rowsArr[i])
    var max = -1;
    thisBoxes.each(function() {
        var h = $(this).height(); 
        max = h > max ? h : max;   
    });
    thisBoxes.css("height",max+"px");
}