Getting a parent element for a jquery selector

Question

I have a table where each row has a CSS id like this:

<table> <tr id='1'>...</tr> <tr id='2'>...</tr> <tr id='3'>...</tr> </table>

In a row, a user can click on a particular element within a cell. I want to find the row that has been clicked on.

So for example:

<tr id='x'><td></td>...<td><div class='someclass'><div class='anotherclass'></div></div></td>...</tr>

In this case, I want to respond when the user clicks on a class='anotherclass' element. I want to get the id of the row containing this clicked element but I don't want to use $(this).parent().parent().parent().... etc. because there are multiple levels of parentage and it gets ugly.

Is there a way to get the row containing this element with using .parent() multiple times?

UPDATE: Thanks everyone. That is perfect.

possible duplicate of jquery: find parent()*n in nested element? — Andy E
– Andy E, Commented Oct 14, 2011 at 9:57

Andy E · Accepted Answer · 2011-10-14 09:53:17Z

9

Use closest():

$('.anotherclass').click(function () { alert($(this).closest('tr').prop('id')); });

answered Oct 14, 2011 at 9:53

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Allardice · Accepted Answer · 2011-10-14 09:53:59Z

Use closest:

$(".anotherclass").click(function() { console.log($(this).closest("tr").attr("id")); });

From the docs:

Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.

erimerturk · Accepted Answer · 2011-10-14 10:33:07Z

you can use this.

$('.anotherclass').click(function () { alert($(this).parents('tr').attr("id")); });

Collectives™ on Stack Overflow

Getting a parent element for a jquery selector

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related