jQuery selection: traversing up, then back down

Question

I am struggling with how to select a particular element with jQuery. Conditions outlined here:

• At the relevant point in my function, this references a span.
• That span may be a child, grand child, or great grand child, but somewhere up the hierarchy, it's contained by a td.
• I'd like to select the last span inside of the td.
• The span may be this, or it may be another span.
• The span tags to be selected is a direct child of the containing td, so last-child is workable. However, for future flexibility a solution that doesn't assume it's a direct child is preferred.

So far, I am using this to select the correct parent element:

$(this).parents('td')

I don't know how to traverse back down the DOM tree to get the final span inside of the selected td. Thanks!

Edit

Per my comments below, would also be nice to select from a span or div, whichever is last.

Answer 1

$(this).parents('td').children('span:last');

should do the trick.

Edit

I didn't notice your desire to not only deal with immediate children. If you want all decendants, then you would use

$(this).parents('td').find('span:last')

I had assumed the span would always be a child of the td.

Final Edit

For posterity's sake (and to make it easier for people to find this answer in the future), since this was already accepted as the answer, Ben came up with a more elegant solution in his answer that I'm going to put here:

$(this).closest('td').find('div,span').filter(':last')

As Ben said, you must be using JQuery 1.3 for closest() to work. Good work! :-)

Answer 2

I prefer to use closest in this case, instead parents. You don't have to worry about there being two or more 'td' elements in the ancestry.

$(this).closest('td').children("span:last")