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.
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.
> selector without anything in front of it? Scratch head That's certainly not valid CSS, and I don't see it getting mentioned in the API pages... Hmmmm... will give it a try now
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') 
.find(), just more/extra steps to get there first :).find() you do 1 if() check (to get $(this)), then go Sizzle, with the $(selector, this) format you do 7 if()'s and 2 regexes to get to the same place...if you're looping that can really add up. If you're not looping I agree, but the performance is a factor when running this quite a bit.find() more explanatory anywayAn 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" ); }); 