I have markup similar to this:
<div class='wrapper plugin'>
//some
content
<div class='child-wrapper plugin'>
//some more
content
<div>
<ul>
<li><div class='cliky'>clicky!</div></li>
</ul>
</div>
</div>
<div class='cliky'>clicky!</div>
</div>
I need to be able to select the first .clicky div only, not any .clicky divs inside a .plugin > .plugin div.
The wrapper has .plugin class too - might seem counter-intuitive so another way to view it is this: I want to get the .clicky children of a given .plugin div, but not .plugin .plugin .clicky.
Here's the problem - the depth of each .clicky element (or indeed, the number of them) is unknown and variable in relation to the wrappers. One could be immediately below the first wrapper, or inside 10 <ul>s.
I've tried selectors like:
$('.wrapper').find('.clicky').not('.plugin > .clicky');
But they still selected child .clicky.
How would I be able to filter out .plugin and any children of .plugin from my selector before using find()?
