jQuery to set div height

Question

With the function below it allows me to set the divs to the max height using the specific class however I need to adjust it to allow me to set the height of each row dynamically.

Example:

The menuBoxesParagraph boxes within row could be a different height then the boxes within rowX I need to be able to get the max .menuBoxesParagraph height for each "row" and then be able to set the row height based on whatever the max is - I might have a .menuBoxesParagraph box that is 298px high - this would then be the highest box within that specific row - the row height should then be that height

<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>

Current 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

you set border and padding CSS to .menuBoxesParagraph so to calculate it's actual height you should use outerHeight() function. and as I undrestand you want to have rows, that their height is set to maximum height of .menuBoxesParagraph so for each row you should have this function called.like 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

you just replace:

$(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

hi you need to make just changes in your script coz you need to apply the height to the each row and you have put the css applying code out side of the scope where actually the you get the DOM element of each row here i have given the example demo code

and another thing is that you must wrap the ternary conditions in brackets that will check for the comparisons of the value

here is the change you need to get

check out

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

here is the demo working code

DEmO

---

Updated answer

I tried to apply height to two different div's and here is the result of your expectation

  $(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> 

here is the updated DEMO UPDATED DEMO

Answer 4

All you need is to make boxes of each row of equal height individually, correct? If so then this code will do the thing.

All you needed to do is group each row boxes separately and then apply the height logic.

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