jquery find() - how to exclude certain descendants, and their children?

Posted by jammypeach on Stack Overflow See other posts from Stack Overflow or by jammypeach
Published on 2012-10-17T16:44:00Z Indexed on 2012/10/17 17:01 UTC
Read the original article Hit count: 227

Filed under:
|

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()?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-selectors