What's the jquery CSS3 selector for excluding nested descendents?

Posted by Danjah on Stack Overflow See other posts from Stack Overflow or by Danjah
Published on 2011-01-12T04:48:04Z Indexed on 2011/01/12 4:54 UTC
Read the original article Hit count: 153

Filed under:
|
|
|
|

Per my SO question here, which has turned to jquery to solve this, but which may be worked back into YUI if I get my thinking straight, I need a selector to exclude descendents.

The solution proposed says something like this:

$( '.revealer:not(.revealer > .revealer)' );

To fit more accurately with my situation, because I have multiple HTML chunks to perform the same test on, I have updated it be:

$( '#_revealerEl_0 .handle:not(#_revealerEl_0 .reveal .handle)' );

The HTML its selecting on (image there are numerous copies of this same chunk on a page, each needing to be treated alone - an id attribute is assigned to each 'revealer'):

<div class="revealer">
  <div class="hotspot">
    <a class="handle" href="javascript:;">A</a>
    <div class="reveal">
      <p>Content A.</p>
    </div>
    <div class="reveal">

        <p>Content B.</p>

        <!-- nested revealer -->
        <div class="revealer">
          <div class="hotspot">
            <a class="handle" href="javascript:;">A</a>
            <div class="reveal">
              <p>Sub-content A.</p>
            </div>
            <div class="reveal">
              <p>Sub-content B.</p>
            </div>
          </div>
        </div>

    </div>
  </div>
</div>

In a nutshell: I need to target 'top level' handles within a 'hotspot', per revealer - and no nested descendents with the same class names.

thanks, d

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery