如何排除不受欢迎的后代?

我有一个元素包含
n
可点击句柄和
n
可揭示元素的情况:
<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>
当我点击'handle'时,它会显示'reveal'元素。这很好用。无论创建者想要什么,这块代码都会被放入给定的文档中。包括......在另一个
<div class="reveal"></div>
元素内。嵌套这些揭示对象的能力是合理的,在我的情况下很有用。 我坚持的是,只有处理即时
<div class="reveal"></div>
元素,而不是嵌套元素(否则单击外部句柄将显示alll嵌套显示)的体面方式。 所以这是示例结构:
<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>
我大量使用YUI2.8.2框架,所以现在当你单击一个句柄来收集一组自己的启示器并显示它们时,我有一个测试,但不包括嵌套的显示,应该由他们自己的实例化模块操作,不是父母的。 Javascript测试如下:
    // 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 ;
},
但我所能想到的就是将一个新的类名
revealer-nested
添加到嵌套的
revealer
元素中...但我真的不想这样做,因为这些对象应该存在于他们自己的上下文中而不关心或受到父母的影响。 ...我希望不是tmi,请询问任何必要的问题以获取更多信息 - 我可能错过了一些上下文信息,因为我正在重构这个模块。 很多,非常感谢提前。 编辑: 同样重要的是我不要开始依赖诸如parentNode,childNode [x],nextSibling等的后代属性......因为目前这个模块非常灵活,因为它的'reveal'和'handle'元素可以驻留在其他元素中标记仍然是目标 - 只要它们被发现在“热点”内。     
已邀请:
有一个CSS3选择器:not()允许您从选择中过滤掉元素。我知道jQuery可以通过CSS3选择器选择一组元素,例如: $('。revealer:not(.revealer> .revealer)') 我认为这可以作为一个选择器,只选择“showaler”类的元素,而不是“showaler”类的孩子。 这一切都取决于YUI能够支持CSS3选择器来选择元素集(如果你肯定只使用YUI)。 这有帮助吗?我想那就是你要问的......     

要回复问题请先登录注册