Is there such thing as a relative jQuery selector?

Question

I have a reference to a jquery object with the this variable. I am looking for a way of applying the child selector to the object.

I'm using $(this).find('table > tbody > tr > td'), but what I'm aiming for is something more like $('[Value of $(this) goes here somehow] > table > tbody > tr > td').

I realise that I can do $(this).children('table').children('tbody').children('tr').children('td'), but I was wondering if there was some syntactic sugar I could use here.

Answer 1

You can start with a child selector (>) when using .find() as well, like this:

$(this).find('> table > tbody > tr > td')

It's an often overlooked use case, but it works just great for what you're after.

Answer 2

As Nick said, you can use find(), or you can use selector context:

$('> table > tbody > tr > td', this)

// Is the equivalent of
$(this).find('> table > tbody > tr > td')

Answer 3

An alternative way would be passing a second parameter $('selector', context), which defines a context for search.

By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function.

$( "div.foo" ).click(function() {
    $( "span", this ).addClass( "bar" );
});