How to get the highest of the elements in each of multiple wrappers with JavaScript?

Question

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>

Answer 1

You need to move your class assignment into the loop.

Alternatively you can use Math.max when you run over the wrappers

This is not marking blocks with same height, you can loop over the heights if you want to mark more than one.

const sliders = document.querySelectorAll(".slider_inner");
sliders.forEach(slider => {
  const blocks = slider.querySelectorAll(".block");
  const heights = [...blocks].map(block => block.offsetHeight);
  // Find the maximum height
  const maxHeight = Math.max(...heights);

  // Find the index of the block with the maximum height
  const tallestBlockIndex = heights.indexOf(maxHeight);

  if (blocks[tallestBlockIndex]) {
    blocks[tallestBlockIndex].classList.add("highest");
    slider.classList.add("highest_defined");
  }
});

.highest {
  background-color: red;
}

.slider_inner {
  margin-bottom: 20px;
}

.highest_defined {
  border: 1px solid black
}

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