Welcome jQuery newbies! I’m writing a quick post here to help clarify some differences between the
parent() and
parents() methods.
Given the following HTML:
<html>…<body><div class=”one”><div class=”two”><p><span>Some text</span></p></div></div></body></html>
$(’span’).parent() will select the
tag such that the element set in the jQuery object is [span].
$(’span’).parents() will select
all parent tags such that the element set in the jQuery object is [p, div.two, div.one, body, html].
So parent() will select the first parent element while parents() will select all elements straight up the DOM tree.
Now jQuery has some great flexibility in that you could do that following:
$(’span’).parents().filter(‘div’) which would result in [div.two, div.one]. jQuery makes it even easier as the parent() and parents() methods support filtering built in so the above can be reduced to:
$(’span’).parents(‘div’) giving you [div.two, div.one].
Let’s continue with one more example, let’s say that you only need the first div in the parent DOM tree, jQuery to the rescue $(’span’).parents(‘div:eq(0)’) will give you [div.two]
-Jonathan
Source:
http://jqueryminute.com/jquery-parent-vs-parents/