HTML CSS JAVASCRIPT JQUERY LIQUID

jQuery Traversing - Siblings

❮ Previous Next ❯

Using jQuery, you can move horizontally within the DOM tree to locate elements that are next to or at the same level as a specific element.

Siblings share the same parent

Traversing Sideways in The DOM Tree

There are numerous helpful jQuery functions for moving horizontally within the DOM structure:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

jQuery siblings() Method

The siblings() function gives you all the elements that are siblings of the chosen element.

Here is an example that shows you all the elements that are next to the <h2> element:

You can also add an extra choice to narrow down the search for siblings.

In this example, we retrieve all <h2> elements that are siblings of an <p> element.

jQuery next() Method

The next() function provides the element right next to the one you've chosen.

In this example, we find the next element that comes after an <h2> element.

jQuery nextAll() Method

The nextAll() function gives you all the elements that come after the chosen element and share the same parent.

In this example, you get all the elements that come after an <h2> element.

jQuery nextUntil() Method

The nextUntil() method gives you all the elements that come after a certain point but before another point among siblings.

In this example, you will find all the elements that are siblings of an <h2> element and also siblings of a <h6> element.

jQuery prev(), prevAll() & prevUntil() Methods

The prev(), prevAll(), and prevUntil() methods do something similar to the methods we talked about earlier, but in the opposite direction. They find and give you the elements that come before the current one, moving backward along the sibling elements in the DOM tree instead of moving forward.
❮ Previous Next ❯