javascript - 如何排除不希望的后代？

我遇到一种情况，其中一个元素包含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="reveal"></div>元素中包含...。嵌套这些显示对象的能力是合理的，在我的案例中很有用。

我所坚持的是一种仅处理立即<div class="reveal"></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-nested元素中添加新的类名revealer ...但是我真的不想这么做，因为这些对象应该存在于它们自己的对象中。情境，而不在乎或不受父母揭露者的影响。

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

非常感谢。

编辑：
同样重要的是，我不要开始依赖后代属性，例如parentNode，childNode [x]，nextSibling等...，因为当前该模块非常灵活，因为其“ reveal”和“ handle”元素可以驻留在其他模块中标记，并且仍然是针对性的-只要在“热点”中找到它们即可。

最佳答案

有一个CSS3选择器：not（），您可以从选择中过滤掉元素。我知道jQuery可以通过CSS3选择器选择一组元素，例如：

$（'。revealer：not（.revealer> .revealer）'）


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

这完全取决于YUI是否能够支持CSS3选择器来选择元素集（如果您绝对只使用YUI）。

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