Получение всех видимых элементов с помощью MooTools - PullRequest
Новая
       27

Получение всех видимых элементов с помощью MooTools

4 голосов
/ 22 августа 2010

Я перехожу из jQuery в MooTools (для забавы ..), и у меня есть эта строка кода:

$subMenus = $headMenu.find('li ul.sub_menu:visible');

Как я могу написать это в mootools?Я знаю, что могу использовать getElements, но как я могу проверить видимый ul? (Я часто использую этот (: visible) селектор).

Редактировать -

Я реализовал свою собственную функцию: 

  function findVisibleElements(elementsCollection){
    var returnArray = [];
    elementsCollection.each(function(el){
      if(el.getStyle('display') === 'block'){
        returnArray.push(el);
      }
    });

    return returnArray;
  }

И что я хочу - это сдвинуть все видимые подменю, вот что я написал: 

// Sliding up the visible sub menus 
if( visibleSubMenus.length > 0 ){
  visibleSubMenus.each(function(el){
      var slider = new Fx.Slide(el, {duration: 2000});
      slider.slideOut();
  });
}

Почему мой код не работает? Моя функция работает, и проблема в Fx.Slide.Я добавил mootools больше с Fx.Slide.

Ответы [ 2 ]

8 голосов
/ 22 августа 2010

Просто расширьте функциональность селектора - это MooTools! 

$extend(Selectors.Pseudo, {
    visible: function() {
        if (this.getStyle('visibility') != 'hidden' && this.isVisible() && this.isDisplayed()) {
            return this;
        }
    }
});

После этого просто выполните обычный $$('div:visible'), который вернет видимые элементы.

Посмотрите на пример, который я создал: http://www.jsfiddle.net/oskar/zwFeV/

1 голос
/ 22 августа 2010

Функция $$() в Mootools в основном эквивалентна селектору JQuery $() do-it-all-all. 

// in MooTools
var elements = $$('.someSelector');

// natively in most newer browsers
elements = document.body.querySelectorAll('.someSelector');

Однако, для этого конкретного случая, поскольку: visible не является реальным псевдоклассом, вам придется аппроксимировать его с помощью фильтра Array в Mootools. 

var isItemVisible = function (item) {
    return item.style.visibility != 'hidden' && item.style.display != 'none';
}
var elements = $$('ul').filter(isItemVisible);

Могут быть и другие вещи, которые, по вашему мнению, делают элемент «невидимым», и в этом случае вы можете соответствующим образом добавить их в функцию фильтрации.

...