Get the outerHeight of the class and take the highest value
I am using .outerHeight
to set the height of another div using a class as a selector.
var $example = $('.example');
var $height = $example.outerHeight();
var $styles = { 'height': $height }
$('.wrapper_sub').css($styles);
I want to use this on multiple "slides" of my site:
<div class="wrapper">
<div class="example">Some Content</div>
<div class="wrapper_sub">Other Content</div>
</div>
<div class="wrapper">
<div class="example">Some Content</div>
<div class="wrapper_sub">Other Content</div>
</div>
<div class="wrapper">
<div class="example">Some Content</div>
<div class="wrapper_sub">Other Content</div>
</div>
How can I get .outerHeight
each one .example
, take only the highest value and add it to all .wrapper_sub
divs?
+3
source to share
2 answers
See comments in line:
var maxHeight = 0; // Initialize to zero
var $example = $('.example'); // Cache to improve performance
$example.each(function() { // Loop over all the elements having class example
// Get the max height of elements and save in maxHeight variable
maxHeight = parseFloat($(this).outerHeight()) > maxHeight ? parseFloat($(this).outerHeight()) : maxHeight;
});
$('.wrapper_sub').height(maxHeight); // Set max height to all example elements
+1
source to share
Scroll through the elements .example
and get the maximum value. Then apply this value to those elements:
//Set an empty array
var arr = [];
//Loop through the elements
$('.example').each(function() {
//Push each value into the array
arr.push(parseFloat($(this).outerHeight()));
});
//Get the max value with sort function
var maxH = arr.sort(function(a,b) { return b-a })[0];
//Apply the max value to the '.example' elements
$('.example').css({'height': maxH + 'px'});
+1
source to share