jQuery Siblings

jQuery Traversing - Finding Siblings

Sibling elements in the DOM tree are elements that share the same parent. Think of them as brothers and sisters sitting next to each other on the same branch of the tree.

jQuery offers a suite of methods for navigating sideways in the DOM tree to find these sibling elements.

Key Methods for Traversing Sideways

Several useful jQuery methods allow you to select sibling elements:

• siblings(): Selects all sibling elements of the matched elements. Can optionally be filtered by a selector.
• next(): Selects the single, immediately following sibling of each matched element.
• nextAll(): Selects all following siblings of each matched element. Can optionally be filtered.
• nextUntil(): Selects all following siblings up to (but not including) an element specified by a selector.
• prev(): Selects the single, immediately preceding sibling of each matched element.
• prevAll(): Selects all preceding siblings of each matched element. Can optionally be filtered.
• prevUntil(): Selects all preceding siblings up to (but not including) an element specified by a selector.

jQuery siblings() Method

The siblings() method returns all elements that share the same parent as the selected element(s), excluding the element(s) themselves.

Example: Find all siblings of an <h2> element.

// HTML:
// <div>
//   <h1>Title</h1>
//   <h2>Subtitle</h2>
//   <p>Paragraph 1</p>
//   <p>Paragraph 2</p>
//   <h6>Footer</h6>
// </div>

$(() => {
  // Select the h2
  const subtitle = $('h2');

  // Get all its siblings
  const h2Siblings = subtitle.siblings();

  // This selects h1, p (both), and h6.
  h2Siblings.css('border', '1px dashed blue'); // Example: Highlight siblings
});

You can filter the siblings by providing a selector.

Example: Find only the <p> siblings of the <h2>.

$(() => {
  // Get only siblings of h2 that are <p> elements
  const pSiblings = $('h2').siblings('p');

  // This selects only the two <p> elements.
  pSiblings.css('font-weight', 'bold'); // Example: Style the paragraph siblings
});

jQuery next() Method

The next() method returns only the immediately following sibling of each selected element. If there’s no next sibling, it returns an empty jQuery object.

Example: Find the element immediately after the <h2>.

$(() => {
  // Get the single element right after the h2
  const elementAfterH2 = $('h2').next();

  // This selects the first <p> element.
  elementAfterH2.css('color', 'green'); // Example: Style the next element
});

jQuery nextAll() Method

The nextAll() method returns all sibling elements that come after the selected element(s) in the document order.

Example: Find all elements following the <h2>.

$(() => {
  // Get all elements after the h2
  const allElementsAfterH2 = $('h2').nextAll();

  // This selects both <p> elements and the <h6>.
  allElementsAfterH2.wrap('<div style="background-color: yellow;"></div>'); // Example: Wrap subsequent siblings
});

Like siblings(), nextAll() can also be filtered with a selector (e.g., $('h2').nextAll('p')).

jQuery nextUntil() Method

The nextUntil() method returns all following sibling elements between the selected element and an element specified by a stopping selector. The element matching the stopping selector is not included.

Example: Find all sibling elements between <h2> and <h6>.

$(() => {
  // Get siblings after h2 up to (but not including) h6
  const elementsBetween = $('h2').nextUntil('h6');

  // This selects both <p> elements.
  elementsBetween.css('font-style', 'italic'); // Example: Style intermediate siblings
});

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

These methods work exactly like their next... counterparts but operate in the opposite direction, selecting preceding siblings (elements that appear before the selected element in the HTML, sharing the same parent).

• prev(): Gets the immediately preceding sibling.
• prevAll(): Gets all preceding siblings.
• prevUntil(): Gets all preceding siblings between the selection and a stopping selector.

Example using prev():

$(() => {
  // Get the element immediately before the h2
  const elementBeforeH2 = $('h2').prev();

  // This selects the <h1> element.
  elementBeforeH2.css('text-decoration', 'underline'); // Example: Style the previous element
});

jQuery Traversing Reference

Mastering traversal is key to efficient DOM manipulation. Explore the official jQuery documentation for detailed examples and further methods.