More efficient way to do parent().parent().parent() etc. in jquery

Question

In this script I'm writing, I find myself using .parent() up to seven times in a row to get elements. While this works, it seems like there could/should be an easier way to do this/ function I'm unaware of. Any ideas other than more specific classes/ids on more elements? Basically, my question boils down to accessing the div with id `outer` when I have a reference to the span with id 'innerSpan' in the html below: ```

bla bla

``` So currently, I would do something like this: `var outer = $('#inner').parent().parent()` and that gets crazy with deeply nested elements. Another example: Here my html: ```

Accepted Answer

You have 2 nested tables, to get what you want you can use this two DOM traversal methods `.closest()` or `.parents()`

- `.closest()` Self or ancestor. Self or travels up the DOM tree until it finds a match for the supplied selector

- `.parents()` 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

Using nested tables:

```
$(this).closest('table').closest('tbody').attr('id');
```

```
$(this).parents('table').parents('tbody').attr('id');
```

jsFiddle demo

More efficient way to do parent().parent().parent() etc. in jquery

Solution

Problem