fearofawhackplanet
fearofawhackplanet

Reputation: 53446

Find class inside class with jQuery selectors

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.

Upvotes: 4

Views: 21692

Answers (4)

Felix Kling
Felix Kling

Reputation: 817128

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

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

Upvotes: 9

reko_t
reko_t

Reputation: 56450

$('.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.

Upvotes: 0

Starx
Starx

Reputation: 79049

You can also do this to directly select the required elements

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

Upvotes: 0

Tomas Aschan
Tomas Aschan

Reputation: 60674

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')

Upvotes: 0

Related Questions