Find the Previous Element with specific Class using JS

avatar

Borislav Hadzhiev

Last updated: Jan 2, 2022

banner

Photo from Unsplash

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.

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

index.js
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 parentheses 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 exist in the element's previous siblings, the first variable will never get assigned an element and will remain to store an undefined value.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.