jQuery

Traversing

The DOM traversal methods allow you to select elements based on relation to the current selection. There are three types of relation:

  • ancestor - a parent element on any level, i.e. direct parent, grandparent, great-grandparent, and so on
  • descendant - a child element on any level, i.e. direct child, grandchild, great-grandchild, and so on
  • siblings - elements that share the same parent
$("li.item-a").parent().css("background-color", "red");

$( "ul.first" )
  .find( ".foo" )
    .css( "background-color", "red" )
  .end() // back to the "ul.first"
  .find( ".bar" )
    .css( "background-color", "green" );
method description
parent([sel]) Selects the parent of each element, optionally filtered by a CSS selector.
parents([sel]) Selects the ancestors of each element, optionally filtered by a CSS selector.
parentsUntil([selUntil] [, filter])

Selects the ancestors of each element up to but not including the element matched by the selUntil parameter. Optionally filtered by a CSS selector specified by the filter parameter.

The selUntil can be CSS selector, DOM node, or jQuery object.
offsetParent() Returns the closest ancestor element.
find(sel) Returns the descendants of each element filtered by a CSS selector, jQuery object, or DOM element.
childern([sel]) Returns the children of each element, optionally filtered by a CSS selector. Unlike the find method, this method only travels a single level down the DOM tree.
contents() Returns the children of each element, including text and comment nodes.
siblings([sel]) Returns the siblings of each element, optionally filtered by a CSS selector.
next([sel]) Selects the immediately following sibling of each element. If a CSS selector sel is provided, it retrieves the next sibling only if it matches that selector.
nextAll([sel]) Selects all following siblings of each element , optionally filtered by a CSS selector.
nextUntil([sel][,filter])

Selects all following siblings of each element up to but not including the element matched by the sel parameter, optionally filtered by a CSS selector.

The sel parameter can be a CSS selector, DOM node, or jQuery object.
prev([sel]) Selects the immediately preceding sibling of each element. If a CSS selector sel is provided, it retrieves the previous sibling only if it matches that selector.
prevAll([sel]) Selects all preceding siblings of each element, optionally filtered by a CSS selector.
prevUntil([sel][,filter])

Selects all preceding siblings of each element up to but not including the element matched by the sel parameter, optionally filtered by a CSS selector.

The sel parameter can be a CSS selector, DOM node, or jQuery object.
end()

Ends the most recent filtering operation in the current chain and returns previous state.

Some methods create a new jQuery object based on the current jQuery object. When this happens, a new object will be pushed onto the stack, which is stored inside the object. If you want to revert to the previous selection, call this method.