1. Home

jQuery closest() Method

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

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

    Categories

    HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

    Contact US