如何用JavaScript标记多个容器中各自高度最高的子元素

现有代码只能在全局范围内找出单个最高的.block元素并标记，但实际场景中存在多个.slider_inner容器，需要为每个容器单独找出其内部最高的子元素并添加标记类。

修改后的代码 #

JavaScript

"use strict";

// 获取所有容器元素
const wrappers = document.querySelectorAll(".slider_inner");

wrappers.forEach(wrapper => {
  // 仅查询当前容器内的.block元素
  const slides = wrapper.querySelectorAll(".block");
  let maxHeightElement = null;
  let maxHeight = 0;

  slides.forEach(el => {
    const elementHeight = el.offsetHeight;
    if (elementHeight > maxHeight) {
      maxHeight = elementHeight;
      maxHeightElement = el;
    }
  });

  if (maxHeightElement) {
    maxHeightElement.classList.add("highest");
    wrapper.classList.add("highest_defined");
  }
});

CSS

.highest{
  background-color: red;
}

.slider_inner{
  margin-bottom: 20px;
}

HTML

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

核心修改点 #

• 先获取所有.slider_inner容器，遍历每个容器单独处理
• 每个容器内部仅查询自身的.block子元素，避免跨容器比较高度
• 为每个容器内的最高子元素添加highest类，同时给对应容器添加highest_defined类

内容的提问来源于stack exchange，提问作者Wortuoso