Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

jQuery closest() Method

❮ jQuery Traversing Methods

Example

Return the first ancestor of <span>, that is an <ul> element:

$(document).ready(function(){
  $("span").closest("ul").css({"color": "red", "border": "2px solid red"});
});

Result:

body (great-great-grandparent)
div (great-grandparent)
    ul (second ancestor - second grandparent)
      ul (first ancestor - first grandparent)
    • li (direct parent)  span  
     
Try it Yourself »

Definition and Usage

The closest() method returns the first ancestor of the selected element.

An ancestor is a parent, grandparent, great-grandparent, and so on.

The DOM tree: This method traverse upwards from the current element, all the way up to the document's root element (<html>), to find the first ancestor of DOM elements.

This method is similar to parents(), in that they both traverse up the DOM tree. The differences are as follows:

closest()

  • Begins with the current element
  • Travels up the DOM tree and returns the first (single) ancestor that matches the passed expression
  • The returned jQuery object contains zero or one element

parents()

  • Begins with the parent element
  • Travels up the DOM tree and returns all ancestors that matches the passed expression
  • The returned jQuery object contains zero or more than one element

Other related methods:

  • parent() - returns the direct parent element of the selected element
  • parentsUntil() - returns all ancestor elements between two given arguments


Syntax

Return the first ancestor of the selected element:

$(selector).closest(filter)

Return the first ancestor using a DOM context to look up the DOM tree within:

$(selector).closest(filter,context)

Parameter Description
filter Required. Specifies a selector expression, element or jQuery object to narrow down the ancestor search
context Optional. A DOM element within which a matching element may be found

Try it Yourself - Examples

Return the first ancestor of <span>, that is a <span> element
Because this method begins with the current element, a search for the first <span> of <span>, will return <span>.

Pass in a DOM element as the context within which to search for the first ancestor element
Using both parameters to pass in a DOM element as the context within which to search for the first <ul> element.


❮ jQuery Traversing Methods