I already have half of the solution, but my function only marks a single element in the entire DOM, regardless of the fact that there are several wrapper elements, whose child elements should be queried for height and the highest one of each wrapper marked. I do not need the value.
"use strict";
const slides = document.querySelectorAll(".slider_inner > .block");
let maxHeight = 0;
let maxHeightElement = null;
slides.forEach(el => {
let elementHeight = el.offsetHeight;
if (elementHeight > maxHeight) {
maxHeight = elementHeight;
maxHeightElement = el;
}
});
if (maxHeightElement !== null) {
maxHeightElement.classList.add("highest");
maxHeightElement.parentNode.classList.add("highest_defined");
}
.highest{
background-color: red;
}
.slider_inner{
margin-bottom: 20px;
}
<div class="slider_inner">
<div class="block">Slide 1</div>
<div class="block">Slide 2</div>
<div class="block">Slide 3<br>Slide 3</div>
<div class="block">Slide 4</div>
<div class="block">Slide 5</div>
</div>
<div class="slider_inner">
<div class="block">Slide 1</div>
<div class="block">Slide 2<br>Slide 2</div>
<div class="block">Slide 3</div>
<div class="block">Slide 4<br>Slide 4<br>Slide 4</div>
<div class="block">Slide 5</div>
</div>