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

Question

我遇到的情况是，一个元素包含 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>

当我单击“句柄”时，它会显示两个“显示”元素。这很好用。这段代码会被放入给定文档中创建者想要的任何位置。包括...在另一个

元素内。嵌套这些揭示者对象的能力是合理的，并且对我来说很有用。

我所坚持的是一种只处理直接

元素的好方法，而不是嵌套的元素（否则单击外部句柄将显示所有嵌套的显示）。

所以这里是示例结构：

---

<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 元素添加一个新的类名 revealer-nested...但是我 真的不想这样做，因为这些对象应该存在于它们自己的上下文中，而不关心或受到父揭示者的影响。

...我希望这不是 tmi，请询问任何必需的问题等以获取更多信息 - 我可能错过了一些上下文信息，因为我正在重构此模块。

非常非常感谢。

编辑： 同样重要的是，我不要开始依赖诸如parentNode、childNode[x]、nextSibling 等后代属性...因为目前这个模块非常灵活，因为它的“reveal”和“handle”元素可以驻留在其他元素中标记并仍然成为目标 - 只要它们被发现在“热点”内。

Answer 1

CSS3 选择器 :not() 允许您从选择中过滤掉元素。我知道 jQuery 可以通过 CSS3 选择器选择一组元素，例如：

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

我认为它可以作为选择器，仅选择“revealer”类的元素，而不是“revealer”类的子元素。

这一切都取决于 YUI 能够支持 CSS3 选择器来选择元素集（如果您肯定只使用 YUI）。

这有帮助吗？我想这就是你问的...