What's the difference between these? Is one more efficient than the other? I'm a little bit confused to why they both exist. Say I have this markup:
<table>
<tr>
<td>...</td>
<td><span class='toggle'>Toggle</span></td>
</tr>
<tr>
<td>...</td>
<td><span class='toggle'>Toggle</span></td>
</tr>
<tr>
<td>..</td>
<td><span class='toggle'>Toggle</span></td>
</tr>
</table>
From the <span>
tags I could use either $(this).closest('tr');
or $(this).parents('tr');
to access the parent/closest <tr>
tag.
(Note: The question was edited the day after being asked, changing the question from about parent
to being about parents
[note the plural]. Which kind of makes a difference!)
Re your original question about parent
(singular) vs. closest
: parent
only ever goes one level up. closest
starts with the current element (not just the parent) and keeps searching through ancestors until it finds a match (or runs out of ancestors).
Re your updated question about parents
(plural) vs. closest
: There are two differences:
Whether the current element is considered (it is with closest
, it is not with parents
).
Whether the search stops with the first match (it does with closest
, it doesn't with parents
).
From your original question:
From the tags I could use either $(this).closest('tr'); or $(this).parent('tr');
No, actually. $(this).parent('tr');
would return an empty jQuery object, because the parent of the span
doesn't match the selector.
From your updated question:
From the tags I could use either $(this).closest('tr'); or $(this).parents('tr');
You could, provided that your tr
isn't also within another tr
(e.g., a table containing a table). If that's the case, you'll get the same result. But if you have a table within a table, with parents
you'll get multiple tr
s (all of the ancestor tr
elements).
Consider this structure:
<div class="wrapper">
<div class="inner">
<p>Testing <span>1 2 3</span></p>
</div>
</div>
If we hook click
on the span
, this is what we get back from the three relevant methods:
$(this).parent('div')
- Empty jQuery object, the parent of the span
is not a div
.$(this).parents('div')
- jQuery object with two div
s in it, the "inner" and "wrapper" divs (in that order).$(this).closest('div')
- jQuery object with one div
in it, the "inner" one.Here's the result if we hook click
on the span
and use span
as the selector:
$(this).parent('span')
- Empty jQuery object, the parent of the span
is not a span
.$(this).parents('span')
- Empty jQuery object, the span
has no ancestor span
s.$(this).closest('span')
- jQuery object with the span
that was clicked.