Loading...

Previous and Next Element Siblings (DOM)

3 min read

views

Previous and Next Element Siblings (DOM)

The Element.previousElementSibling and Element.nextElementSibling are read-only properties that returns the sibling element prior or following the specified element.

Use Case

One particular use case is a ratings component. The ratings component in the below example is composed of five span elements. Each span element has a css content property with the value containing '☆' and an active class where the content value changes to '⭐'.

When one of the span elements is clicked, the active class should be added to itself and all previous siblings relative to itself. Also, any active classes that may have been added to any next element siblings relative to itself should be removed.

The Psuedo code for the below is as follows:

Psuedo Code

1 

import './styles.css';

document.getElementById("app").innerHTML = `
<div id='rating'>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
`;

let elem = document.querySelector('#rating')

//retrieve all spans inside #rating
let elems = document.querySelectorAll('#rating span')

//add a click event listener to each span
elems.forEach(elem => {
elem.addEventListener('click', function (event) {

      //add the active class to the clicked element
      event.target.classList.add('active')

      //retrieve previous element sibling
      let prev = event.target.previousElementSibling

      //while the previous element sibling is not null
      while (prev) {
        //add the active class to the sibling
        prev.classList.add('active')

        //retrieve the value for the previous element sibling
        prev = prev.previousElementSibling;
      }

      //retrieve next element sibling
      let next = event.target.nextElementSibling

      //while the next element sibling is not null
      while (next) {
        //add the active class to the sibling
        next.classList.remove('active')

        //retrieve the value for the next element sibling
        next = next.nextElementSibling;
      }

    })

})
Open on CodeSandbox
published
author
Neal Cooper
views
0
tags
DOMJavaScript