如何排除不希望的后代? [英] How to exclude undesired descendants?

问题描述

我遇到的情况是，一个元素包含n个可单击的句柄和n个可显示的元素:

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>

当我单击句柄"时，它显示了两个显示"元素.这很好.这段代码被放置在创建者想要的任何地方的给定文档中.在另一个<div class="reveal"></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.

我所坚持的是一种仅处理立即<div class="reveal"></div>元素而不处理嵌套元素的不错的方法(否则，单击外部句柄将显示所有嵌套的显示).

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).

所以这是示例结构:

<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框架，因此，当您单击一个手柄以收集一组自己的显示程序并显示它们时，我现在已经进行了测试，但不包括嵌套的显示程序，应由它们自己操作实例化的模块，而不是父母的模块.

---

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'.

JavaScript测试如下:

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 ;
},

但是我能鼓舞的是在嵌套的revealer元素中添加一个新的类名revealer-nested ...但是我真的不想这样做，因为这些对象应该存在于它们自己的上下文中，而不在乎或不受父级揭示者的影响.

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.

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

... 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.

非常感谢.

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

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'.

推荐答案

有一个CSS3选择器:not()，它可以让您从选择中滤除元素.我知道jQuery可以通过CSS3选择器选择一组元素，例如:

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)')

我认为将其用作选择器，以仅选择不是"revealer"类的子级的"revealer"类的元素.

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

这一切都取决于YUI是否能够支持CSS3选择器来选择元素集(如果您绝对只使用YUI).

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...

这篇关于如何排除不希望的后代?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！