Question

Per my SO question here，已经转向jquery来解决这个问题，但如果我直截了当地思考，我可能会回到YUI中，我需要一个选择器来排除后代。

建议的解决方案是这样的：

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

为了更准确地适应我的情况，因为我有多个HTML块来执行相同的测试，我更新了它：

$( '#_revealerEl_0 .handle:not(#_revealerEl_0 .reveal .handle)' );

它选择的HTML（图像在页面上有相同块的大量副本，每个都需要单独处理 - 每个'揭示者'都分配了一个id属性）：

<div class="revealer" id="#_revealerEl_0">
  <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>

    </div>
  </div>
</div>

简而言之：我需要针对“热点”中的“顶级”句柄，每个揭示者 - 并且没有具有相同类名的嵌套后代。

感谢， d

编辑：

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

Answer 1

我不知道哪个是你的#_revealerEl_0元素，但如果它是你的顶级.revealer，你不能这样做吗？

$('#_revealerEl_0 > .hotspot > .handle')

或者，如果顶级.revealer本身是#_revealerEl_0的后代，则可行：

$('#_revealerEl_0 > .revealer > .hotspot > .handle')

这里的基本前提是你链接了多个>子组合子。

Answer 2

试试这个：

         obj = $('.revealer[id*="revealerEl"]');
    //this will give you what you are after
     result = $("> .hotspot > .handle",obj)

    //if you want to see them in red
         $("> .hotspot > .handle",obj).css('color','red');

//or assign a click to it
 $("> .hotspot > .handle",obj).click(function(){
//blah ....
})

Answer 3

这适用于我使用jQuery：

$('.revealer:first > .hotspot > .reveal')

鉴于第一个启示者，找到任何直接儿童的热点，并找到任何DIRECT透露物品。

因此，要将处理程序分配给“句柄”：

$('.handle').click(function(){
    $(this).closest('.hotspot > .reveal').show();
});

以上翻译为：

对于任何给定的句柄，将click事件函数指定给元素
单击句柄时，找到其最近的父热点
从热点中，找到任何属于热点直接孩子的揭密元素
如果隐藏了display：none。

什么是用于排除嵌套后代的jquery选择器？

3 个答案: