Find the Next Element with specific Class using JS

avatar

Borislav Hadzhiev

Sun Jan 02 20222 min read

banner

Photo by Looie Kang

Find the Next Element with specific Class using JS #

To find the next element with specific class:

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

Here is the HTML for the examples in this article.

index.html
<!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
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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee