0

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>

0

2 Answers 2

2

Instead of looping through all the .slide_inner > .block elements. You want to do two loops. One through all .slide_inner elements. Then for each .slide_inner element, you want to loop through the :scope > .block elements to determine which is the highest within this .slider_inner.

"use strict";

const containers = document.querySelectorAll(".slider_inner");
// loop through the .slider_inner containers
for (const container of containers) {
  // for each container, collect the .block elements that are a direct child
  const slides = container.querySelectorAll(":scope > .block");
  // exit the current iteration early if there are no .block children
  if (!slides.length) continue;
  // find the highest slide
  const highestSlide = maxBy(slides, slide => slide.offsetHeight);
  // add the "highest" class to the highest slide
  highestSlide.classList.add("highest");
}

// Abstracted away getting the item with the highest value from an iterable
// collection.
function maxBy(iterable, valueFn) {
  return Array.from(iterable, (item) => ({ item, value: valueFn(item) }))
    .reduce((max, current) => current.value > max.value ? current : max)
    .item;
}
.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>

4
  • No need for prototype.call. This is more modern: const maxBy = (arrayLike, valueFn) => Array.from(arrayLike).reduce((max, current) => ( valueFn(current) > valueFn(max) ? current : max ));
    – mplungjan
    Commented Dec 15, 2023 at 8:10
  • Other alternative to get an array from a nodelist is [...nodeList]
    – mplungjan
    Commented Dec 15, 2023 at 8:11
  • 1
    @mplungjan I do agree that both Array.from(arrayLike) and [...arrayLike] look cleaner. The difference is that both convert the array-like to an array first before calling reduce(), so both iterate twice through the collection whereas Array.prototype.reduce.call solution iterates once. Not that it has any impact with the few amount of elements in the example.
    – 3limin4t0r
    Commented Dec 15, 2023 at 9:10
  • 1
    I've updated the solution to use your suggestion, but made the valueFn() call inside Array.from() (during the array conversion). To halve the amount of times the function has to be called.
    – 3limin4t0r
    Commented Dec 15, 2023 at 9:23
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>

1
  • 1
    Note that slider.querySelectorAll(".block") will match any element that has class="block" inside slider. Not just the direct children. If this is a hard requirement, consider changing the query selector to ":scope > .block" instead. This will only match the direct children with class="block".
    – 3limin4t0r
    Commented Dec 14, 2023 at 15:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.