Find the Previous Element with specific Class using JS


Borislav Hadzhiev

Sun Jan 02 20222 min read


Photo by Kari Shea

Find the Previous Element with specific Class using JS #

To find the previous element with specific class:

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

Here is the HTML for the examples in this article.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="first">Box 1</div> <div class="second">Box 2</div> <div id="box">Box 3</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

const box = document.getElementById('box'); let first; let placeholder = box.previousElementSibling; while (placeholder) { if (placeholder.classList.contains('first')) { first = placeholder; break; } placeholder = placeholder.previousElementSibling; } console.log(first); // ๐Ÿ‘‰๏ธ div.first

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

The previousElementSibling property returns the element immediately prior to 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 first or we will reach the first element in the list and break out of the while loop.

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

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

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

If the element with the specific class does not exists in the element's previous siblings, the first variable will never get assigned an element and will remain storing 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