Как исключить нежелательных потомков?

Question

У меня есть ситуации, когда элемент содержит n интерактивных ручки и n revealable элементов:

<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, пожалуйста, задайте любые требуемые вопросы и т. Д. Для получения дополнительной информации. Возможно, я пропустил какую-то контекстуальную информацию, поскольку я прав в середине рефакторинга этого модуля.

Многие, большое спасибо заранее.

EDIT: Также очень важно, чтобы я не стал полагаться на свойства потомка, такие как parentNode, childNode [x], nextSibling и т. Д. ... потому что в настоящее время этот модуль довольно гибкий, поскольку его «раскрыть» и « элементы управления могут находиться в пределах другой разметки и все еще быть нацеленными - если они находятся внутри «горячей точки».

Answer 1

Существует селектор CSS3: not(), который позволяет отфильтровывать элементы из выделения. Я знаю, что JQuery можно выбрать набор элементов по селектору CSS3, например:

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

Я думаю, что будет работать в качестве селектора только выбрать элементы класса «открывателя», которые не являются потомками класса «открывателя» ,

Это зависит от того, насколько YUI может поддерживать селектор CSS3 для выбора наборов элементов (если вы определенно используете только YUI).

Помогло ли это? Я думаю, это то, о чем вы спрашивали ...