Difference between jQuery parent(), parents() and closest() functions

Question

I have been using jQuery for a while. I wanted to use the parent() selector. I also came up with the closest() selector. Could not find any difference between them. Is there any? If yes, what?

What is the difference between parent(), parents() and closest()?

parent::::travels 1 step back to parent....::::parents::: gives a list of all parents....::::closest::: travels back through siblings till it finds the condition and return only the first. All these can be modified with additional selectors — Muhammad Umer, Mar 23 '13 at 04:21

score 203 · Answer 1 · edited Jun 20 '20 at 09:12

from http://api.jquery.com/closest/

The .parents() and .closest() methods are similar in that they both traverse up the DOM tree. The differences between the two, though subtle, are significant:

.closest()

Begins with the current element

Travels up the DOM tree until it finds a match for the supplied selector

The returned jQuery object contains zero or one element

.parents()

Begins with the parent element

Travels up the DOM tree to the document's root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied

The returned jQuery object contains zero, one, or multiple elements

.parent()

Given a jQuery object that represents a set of DOM elements, the .parent() method allows us to search through the parents of these elements in the DOM tree and construct a new jQuery object from the matching elements.

Note: The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $("html").parent() method returns a set containing document whereas $("html").parents() returns an empty set.

Here are related threads:

`The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $("html").parent() method returns a set containing document whereas $("html").parents() returns an empty set.` — Naveed, Jan 13 '14 at 06:12
@ScubaSteve, yeah, but the parents() question is more interesting. — Paul Draper, Aug 13 '14 at 01:04

score 193 · Accepted Answer · edited Dec 21 '18 at 10:05

193

closest() selects the first element that matches the selector, up from the DOM tree. Begins from the current element and travels up.

parent() selects one element up (single level up) the DOM tree.

parents() method is similar to parent() but selects all the matching elements up the DOM tree. Begins from the parent element and travels up.

edited Dec 21 '18 at 10:05

Amit Shah

7,771
5
39
55

answered Feb 08 '12 at 12:35

Subash

7,098
7
44
70

score 21 · Answer 3 · edited Jun 20 '20 at 09:12

21

The differences between the two, though subtle, are significant:

.closest()

Begins with the current element

Travels up the DOM tree until it finds a match for the supplied selector

The returned jQuery object contains zero or one element

.parents()

Begins with the parent element

Travels up the DOM tree to the document's root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied

The returned jQuery object contains zero, one, or multiple elements

From jQuery docs

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 08 '12 at 12:26

antyrat

27,479
9
75
76

13

i think your describing .parents() here – Muhammad Umer Mar 23 '13 at 04:17

score 2 · Answer 4 · edited Sep 30 '21 at 16:18

2

There is difference between both $(this).closest('div') and $(this).parents('div').eq(0)

Basically closest start matching element from the current element whereas parents start matching elements from parent (one level above the current element)

See http://jsfiddle.net/imrankabir/c1jhocre/1/

edited Sep 30 '21 at 16:18

isherwood

58,414
16
114
157

answered Oct 01 '15 at 08:49

Imran Kabir

81
1
2

score -1 · Answer 5 · answered Apr 11 '14 at 17:39

-1

$(this).closest('div') is same as $(this).parents('div').eq(0).

answered Apr 11 '14 at 17:39

hsuk

6,770
13
50
80

10

Not quite, if $(this) is also a div. – Frank Fajardo May 09 '14 at 02:01

score -1 · Answer 6 · edited Jul 14 '20 at 15:45

parent() method returns the direct parent element of the selected one. This method only traverse a single level up the DOM tree.

parents() method allows us to search through the ancestors of these elements in the DOM tree. Begin from given selector and move up.

The **.parents()** and **.parent()** methods are almost similar, except that the latter only travels a single level up the DOM tree. Also, **$( "html" ).parent()** method returns a set containing document whereas **$( "html" ).parents()** returns an empty set.

[closest()][3]method returns the first ancestor of the selected element.An ancestor is a parent, grandparent, great-grandparent, and so on.

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.

According to docs:

**closest()** 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

Difference between jQuery parent(), parents() and closest() functions

6 Answers6

Linked