jquery shorthand for find() statement

Question

I have a super simple question, instead of doing something like this:

$(".one").click(function() {
    $(this).find('.two').find('.three').css...
});

with this HTML:

<div class="one">
  <div class="two">
    <div class="three"></div>
  </div>
</div>

is there a short hand where you can skip the word find in some way?

Answer 1

$('#one #two #three')

But remember that ID in a page is supposed to be unique

So $('#three').css() should be sufficient

It makes sense when the elements are either class elements or tagNames

$('.one .two .three') <--
$('div span p')       <--  These are fine

All these should work

// Using find to target the class
$(this).find('.two').find('.three').css('border', '1px dashed red');
// Using find to target the class
$(this).find('.two .three').css('border', '1px dashed red');
// Using the this context
$('.two .three',this).css('border', '1px dashed red');
// Using the this context and immediate children
$('> .two > .three',this).css('border', '1px dashed red');

> will only get the immediate children . The other 2 are using this as a context

Check Fiddle

Answer 2

Use the selector context http://api.jquery.com/jQuery/#jQuery1

$(".one").on('click', function() {
    $('.three', this).css...
});

Its the simplest way to go about it.

---

also

$(".one").click(function() {
    $(this).find('.three').css...
});

would work fine, you don't have to traverse every step.