Find the Next Element with specific Class using JS

Find the Next Element with specific Class using JS #

To find the next element with specific class:

Use the nextElementSibling to get the next element sibling.
In a while loop iterate over the next siblings.
Check if each element's class list contains the specific class.

Here is the HTML for the examples in this article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Box 1</div>

    <div class="second">Box 2</div>

    <div class="third">Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

let third;

let placeholder = box.nextElementSibling;

while (placeholder) {
  if (placeholder.classList.contains('third')) {
    third = placeholder;
    break;
  }

  placeholder = placeholder.nextElementSibling;
}

console.log(third); // 👉️ div.third

We used a while loop to iterate over the next siblings of the element with an id of box.

The nextElementSibling property returns the element immediately following the element the method was called on, or null if the element is the first in the list.

How a while loop basically works is - it keeps iterating until the expression between the parenthesis returns a falsy value or we break out of it.

The falsy values in JavaScript are: null, undefined, false, 0, "" (empty string), NaN (not a number).

So, we know that eventually we will either find the node with the class of third or we will reach the last element in the list and break out of the while loop.

We used the classList.contains method to check if the class third is contained in the element's class list.

If it is, we assign the element to the third variable and break out of the while loop.

Otherwise, we assign the placeholder variable to the next sibling element.

If the element with the specific class does not exists in the element's next siblings, the third variable will never get assigned an element and will remain being set to an undefined value.

Find the Next Element with specific Class using JS

Find the Next Element with specific Class using JS #

Borislav Hadzhiev