Question

I have a situation where an element contains n clickable handles and n revealable elements:

<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>
    </div>
  </div>
</div>

When I click ‘handle’, it shows both ‘reveal’ elements. This works fine. This chunk of code is dropped into a given document wherever the creator wants. Including… inside another <div class="reveal"></div> element. The ability to nest these revealer objects is reasonable, and useful in my case.

What I’m stuck on, is a decent way to only handle only immediate <div class="reveal"></div> elements, and not nested ones (otherwise clicking on the outer handle would reveal alll nested reveals).

So here’s the example structure:

---

<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>
        <script type="text/javascript"> // a setup script which instantiates a Module object for this revealer, which controls all revealing </script>

    </div>
  </div>
</div>
<script type="text/javascript"> // a setup script, which instantiates a Module object for this revealer, which controls all revealing </script>

---

I heavily use the YUI2.8.2 framework, so right now I have a test in place when you click a handle to collect a set of its own revealers and show them, but excluding nested reveals, which should be actioned by their own instantiated module, not the parents’.

The Javascript test is as follows:

    // grab all 'reveal' elements to show
    var reveals = yd.getElementsBy(function(el){
            if( yd.hasClass(el, REVEAL_CLASS) && pObj.isChild( el ) ){
                return true ;
            }
            return false;
    }, null, this.root() );


    // the test method above is "isChild( el )", the 'el' arg is a 'handle' inside a 'hotspot', so I have...

isChild: function( el )
{
    var ancestor = yd.getAncestorBy( el, function(nestedEl){
        return yd.hasClass(nestedEl, REVEALER_CLASS);
    });

    // ancestor is the immediate parent 'reveal' element
    var forefather = yd.getAncestorBy( ancestor, function(nestedEl){
        return yd.hasClass(nestedEl, REVEALER_CLASS);
    });

    // forefather is 
    if(forefather){
        // Yuck yuck yuck, get rid of this dependency on a custom className :(
        if(!yd.hasClass(this.getRoot(), 'revealer-nested') ){
            return false ;
        }
    }
    return true ;
},

But all I can muster is to add a new class name, revealer-nested, to a nested revealer element… but I really don’t want to have to do that, because these objects are supposed to exist in their own context and not care or be affected by parent revealers.

… I hope that isn’t tmi, please ask any required questions etc for more info – I may have missed out some contextual info as I’m right in the middle of refactoring this module.

Many, many thanks in advance.

EDIT:
It’s also quite important that I don’t start relying on descendant properties like parentNode, childNode[x], nextSibling, etc … because currently this module is quite flexible in that its ‘reveal’ and ‘handle’ elements can reside within other markup and still be targeted – so long as they’re found inside a ‘hotspot’.

Answer 1

There is a CSS3 selector :not() which allows you to filter out elements from a selection. I know jQuery can select a set of elements by CSS3 selector, for example:

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

I think that would work as a selector to only select elements of class “revealer” which aren’t children of class “revealer”.

This all depends on YUI being able to support CSS3 selectors to select sets of elements (if you’re definitely only using YUI).

Does that help? I think that’s what you were asking…