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

User · Answer

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     quot html quot   parent   method returns a set containing document whereas    quot html quot   parents   returns an empty set   Here are related threads   What  39 s the difference between  closest   and  parents   39 selector  39     https   stackoverflow com a 2200805 149206

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

this  closest  div   is same as   this  parents  div   eq 0

User · Answer

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        quot html quot    parent     method returns a set containing document whereas       quot html quot    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   lt html gt    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

[jquery] Difference between jQuery parent(), parents() and closest() functions

Examples related to jquery