Difference between .closest() and .parents()

Using jQuery closest and parents, you can set or get the first or all ancestor element that matches the selector and traversing up through its ancestors in the DOM tree.

The ancestor may be a parent, grandparent, great grandparent, and so on.

For example:

$("div").closest("p").css({"color": "red"});

If it doesn’t match the selector, then it will continue traversing up the document, parent by parent until the element is found which matches the specified expression.

If no matching element is found, then none will be returned.

Get more about .closest() from jQuery documentation.

Whereas, the parents() method returns all ancestor elements of the selected element.

In the same way, the ancestor is a parent, grandparent, great grandparent, and so on.

For example:

$("div").parents("p").css({"color": "red"});

Get more about .parents() from jQuery documentation.

Read Also: jQuery unwrap() – Remove wrapping div

This method is similar to jQuery closest(), in that they both traverse up the DOM tree.

But, the differences are as follows:

closest() :

• Begins with the current element.
• Returned jQuery object contains zero or one element.
• It travels up the DOM tree and then returns the first ancestor which matches the passed expression.

parents() :

• Begins with the parent element.
• Returned jQuery object contains zero or more than one element.
• It travels up the DOM tree and then returns all ancestors which matches the passed expression.