Question

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

示例：

menuBoxesParagraph中的row框可能与rowX中max .menuBoxesParagraph的{{1}} max高度不同。每个＆＃34;行＆＃34; 然后能够根据<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>的任何内容设置行高 - 我可能有一个298px高的.menuBoxesParagraph框 - 这样会然后是该特定行中的最高框 - 行高应该是该高度

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

    });

当前的jQuery：

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

CSS：

function glow(){

        var text = document.getElementsByClassName('tex_inp01 tex_inp02');

        if (text.value ==null){
            text.style.boxShadow="#8fd7d2 0px 0px 22px";
            }

        else
            remove.style.boxShadow;

        }/**function**/

Answer 1

您将border和padding CSS设置为.menuBoxesParagraph，以便计算它应使用outerHeight()函数的实际高度。当我想要拥有行时，他们的高度设置为.menuBoxesParagraph的最大高度，因此对于每个row，您应该将此函数调用为。FIDDLE

＆＃13;

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

＆＃13;

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

这是演示工作代码

DEmO

更新回答

我尝试将高度应用于两个不同的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>

这是更新的DEMO UPDATED DEMO

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

jQuery设置div高度

4 个答案:

jQuery设置di​​v高度

4 个答案:

jQuery设置div高度