46
<div class="outer">
     <div class="inner"></div>
</div>

how do I find the inner div here?

$container.find('.outer .inner')

is just going to look for a div with class="outer inner", is that correct?

so I tried

$container.find('.outer > .inner')

but that doesn't seem to be working.

Edit:

I know its easy to find with something like

$container.find('.outer').find('.inner')

but I'm looking for the kind of single selector syntax which reads better imho.

fearofawhackplanet
  • 52,166
  • 53
  • 160
  • 253
  • How is `$container` defined? Besides that, should use single selectors whenever possible. It is way easier to read if you do not have to search for the different selector parts all over the place. – jwueller Sep 22 '10 at 08:34
  • "but I'm looking for the kind of single selector syntax which reads better imho." You should prefer the `.find(...)` way because it will be faster the more complex your selector gets or if you use an selector which is not supported by the browser. In this case sizzle will be used for selection which is/could be really slow in comparison to a splitted selector with `.find(...)`. – Andreas Sep 22 '10 at 09:30

2 Answers2

90

is just going to look for a div with class="outer inner", is that correct?

No, '.outer .inner' will look for all elements with the .inner class that also have an element with the .outer class as an ancestor. '.outer.inner' (no space) would give the results you're thinking of.

'.outer > .inner' will look for immediate children of an element with the .outer class for elements with the .inner class.

Both '.outer .inner' and '.outer > .inner' should work for your example, although the selectors are fundamentally different and you should be wary of this.

Andy E
  • 338,112
  • 86
  • 474
  • 445
38

For this html:

<div class="outer">
     <div class="inner"></div>
</div>

This selector should work:

$('.outer > .inner')
Sarfraz
  • 377,238
  • 77
  • 533
  • 578