Как исключить нежелательных потомков? - PullRequest
2 голосов
/ 12 января 2011

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

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

РЕДАКТИРОВАТЬ: Это такжеочень важно, чтобы я не начинал полагаться на свойства-потомки, такие как parentNode, childNode [x], nextSibling и т. д., потому что в настоящее время этот модуль достаточно гибок в том смысле, что его элементы «раскрыть» и «обрабатывать» могут находиться в другой разметке ивсе еще быть целью - пока они находятся внутри «горячей точки».

1 Ответ

2 голосов
/ 12 января 2011

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

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

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

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

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

...