Find class inside class with jQuery selectors

Question

I'm trying to do something like the following in jQuery

$('.container').siblings('.outerClass > .innerClass')

where I'm looking for:

<div class="container"></div>

<div class="outerClass">
    <div class="innerClass">
        find me!
    </div>
</div>

I can't get the syntax right.

Answer 1

Is there a problem ommitting the container selector, and just using

$('.outerClass > .innerClass')

or perhaps (if you don't want to require the inner div to be a direct child)

$('.outerClass .innerClass')

Answer 2

You can also do this to directly select the required elements

$(".outerClass").children(".innerClass").click(function() {
//Do your stuff
});

Answer 3

$('.container').siblings('.outerClass:has(> .innerClass)')

To explain why; .outerClass > .innerClass is a selector that selects an element with class innerClass, not the outerClass. To select an element that has something specific in it, you use the :has selector, which takes a selector as an argument.

Answer 4

And another one (but this should work) (assuming you want to get the element with class innerClass):

$('.container').siblings('.outerClass').children('.innerClass')