我有一个元素包含 n
的情况可点击 handle 和 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>
的好方法元素,而不是嵌套元素(否则单击外部 handle 将显示所有嵌套显示)。
所以这是示例结构:
<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 框架,所以现在我有一个测试,当你点击一个 handle 来收集一组它自己的显示并显示它们时,但不包括嵌套的显示,它们应该由它们自己操作实例化模块,而不是父模块。
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 等后代属性......因为目前这个模块非常灵活,因为它的“显示”和“处理”元素可以驻留在其他标记并仍然是目标 - 只要它们在“热点”内被发现。
最佳答案
有一个 CSS3 选择器 :not() 允许您从选择中过滤掉元素。我知道 jQuery 可以通过 CSS3 选择器选择一组元素,例如:
$('.revealer:not(.revealer > .revealer)')
我认为这可以作为一个选择器来仅选择“revealer”类的元素,这些元素不是“revealer”类的子元素。
这一切都取决于 YUI 能够支持 CSS3 选择器来选择元素集(如果您确实只使用 YUI)。
这有帮助吗?我想这就是你要问的......
关于javascript - 如何排除不需要的后代?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4663793/