Difference between find() and closest() in jQuery

Last Updated : 21 Apr, 2022

Before looking at the differences between the find() and closest() methods, let us briefly understand what are these and what they do.

1. find() Method: This method is used to get all the filtered descendants of each element in the current set of matched elements.

Syntax:

$(selector).find('filter-expression')

Parameter: A selector expression, element, or jQuery object to filter the search for descendants.

Return value: It returns all the matched descendants of the element on which the find() method is called. This method traverses the DOM all way down to the last descendant. It means it traverses all levels down to the DOM, like a child, grandchild, great-grandchild, and so on.

Example: In the following code, it will find all the span tags inside the p tag and change its color to blue.

HTML

<!DOCTYPE html>
 
<head>
    <!-- jQuery library -->
    <script src=
        "https://code.jquery.com/jquery-git.js">
    </script>
</head>
 
<body>
     
<p><span>Hello </span>Geeks!</p>
 
 
    <div>
         
<p>Hey! <span>How </span>are you</p>
 
    </div>
 
     
<p>Hello Geeks</p>
 
 
    <script>
        $('p').find('span').css('color', 'blue')
    </script>
</body>
 
</html>

Output:

2. closest() Method: This method is used to get the first ancestor of the selected element. The ancestors can be parents, grand-parent, great-grandparents, etc.

Syntax:

$(selector).closest(filter-expression)

Parameter: A selector expression, element, or jQuery object to filter the search for an ancestor.

Example: This method traverses all the way up to the document’s root element i.e. <HTML>, to find the first ancestor of the selected element. We have three levels of unordered list <ul> tag. After calling closest() method on <li> tag, it returns the first closest <ul> tag.

HTML

<!DOCTYPE html>
 
<head>
    <!-- jQuery library -->
    <script src=
        "https://code.jquery.com/jquery-git.js">
    </script>
</head>
 
<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <ul>
            <li>three</li>
            <li>four</li>
            <ul>
                <li id="select-Me">five</li>
                <li>six</li>
            </ul>
        </ul>
    </ul>
    <script>
        $("#select-Me")
            .closest("ul")
            .css("color", "blue");
    </script>
</body>
 
</html>

Output:

Difference between find() and closest()

find()	closest()
This method is used to get all the filtered descendants of each element in the current set of matched elements.	This method is used to get the first ancestor of the selected element.
This method traverses the DOM all way down to the last descendant.	This method traverses the DOM all the way up to the document’s root element.
This method goes down the tree looking into the child and child of the child.	This method goes up the tree looking into parents.
Its syntax is -: $(selector).find(filter)	Its syntax is -: $(selector).closest(filter)
It takes Parameter as a filter expression	It takes parameter as a filter
It is used to return the descendant elements of the selected element	It returns the first ancestor of the selected element.