Not able to capture parent object

Question

I'm trying to capture the id attribute on the parent here, and It returns as undefined

<table>
  <tr id="1343">
    <td><span class="hi">Hi</span></td>
  </tr>
</table>

Javascript:

var $id = $(".hi").parent("tr").attr("id");
alert($id);

I thought I was using it right, but I guess not, anyone know why it won't give me the value I'm trying to get?

Here's a fiddle: http://jsfiddle.net/AsDY6/

If I had a say, as much as I would love the rep points for myself, I would choose clav's answer. It gives the most succinct explanation and is backed up by a fiddle and a performance test. ;) — Derek Henderson, May 07 '13 at 16:28

clav · Accepted Answer · 2013-05-07T16:28:49.650

3

You can use parents instead of parent on your row selector.

var $id = $(".hi").parents("tr").attr("id");

As noted by others closest will also work. The difference is that parents will get all parent elements that match the selector. So if you had nested tables you would probably want to use closest because parents would get all parent table rows. If I know the DOM will always only have one parent matching the selector, I tend to prefer parents for performance reasons because parents is faster according to performance tests like this one.

Here's an updated fiddle.

edited May 07 '13 at 16:28

answered May 07 '13 at 15:56

clav

4,221
30
43

1

As this test indicates (http://jsperf.com/jquery-parents-vs-closest/32) it's also faster to use `.parents()` than it is to use `.parents().first()` and both are faster than `.closest()` -- a bit of a surprise. I will edit my answer accordingly. – Derek Henderson May 07 '13 at 16:19

score 3 · Answer 2 · answered May 07 '13 at 15:57

3

.parent() returns the immediate parent, which in this case is the td

Use closest instead. $id = $(".hi").closest("tr").attr("id");

answered May 07 '13 at 15:57

Trenton Trama

4,890
1
22
27

score 1 · Answer 3 · edited May 23 '17 at 12:03

Try .closest('tr') or .parents('tr') instead of .parent('tr');.

.parent() will only go up one level, whereas .closest() will continue to climb up the DOM until it finds a match and .parents() will search up to the root ancestor. (You can also chain .first() to .parents() (e.g., .parents().first()) so that it returns only the first match.)

See Difference between jQuery parent(), parents() and closest() functions for more information about the different methods. And check out these performance comparisons between the three proposed answers.

score 1 · Answer 4 · answered May 07 '13 at 15:58

Change

var $id = $(".hi").parent("tr").attr("id");

TOO

var $id = $(".hi").parents("tr").first().attr("id");

OR

var $id = $(".hi").closest("tr").attr("id");

WHY

The answer is simple. The tag <tr> is not the parent of .hi. .hi's parent is actually the <td> it resides in. Thus you can use .parents instead. However, this could grab one too many, so make sure to use something like .first if you only want the First parent fitting that description.

OR

Use jQuery's .closest method which is supposed to do about the same thing as .parents('selector').first()

score -1 · Answer 5 · answered May 07 '13 at 16:01

-1

Reference parent of parent

Use this code:

var $id = $(".hi").parent().parent().attr("id");

It's work!

answered May 07 '13 at 16:01

Víctor Dueñas Robles

393
1
9

If the class "hi" gets added to a different element, one that isn't a child of the TD, your code breaks, so it is not a very robust solution. – Derek Henderson May 07 '13 at 16:04

score -2 · Answer 6 · answered May 07 '13 at 15:57

-2

   var $id = $(".hi").parent("td").parent('tr').attr("id");
  alert($id);

answered May 07 '13 at 15:57

Ahmed Alnahas

263
1
4

Not able to capture parent object

6 Answers6

WHY