使用 MooTools 获取所有可见元素答案

【问题标题】：Getting all visible elements using MooTools使用 MooTools 获取所有可见元素
【发布时间】：2011-04-02 07:01:40
【问题描述】：

我正在从 jQuery 迁移到 MooTools（为了好玩..），我有这行代码：

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

我如何在 mootools 中编写这个？
我知道我可以使用 getElements 但如何检查可见的 ul？（我经常使用 this(: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。
我用 Fx.Slide 添加了更多的 mootools。

【问题讨论】：

在你最近 5 个问题上接受一些 awnsers，让人们想帮助你更多。
我们对我公司开发的当前产品的所有内容都使用 mootools。我实际上建议未来的人不要进行此切换——jquery 是许多非常棒的新兴库的核心，而 mootools 的错误处理不如 jquery 优雅
我的团队也将 MooTools 用于几乎所有事情，与 Kristian 不同的是，我建议人们DO 进行切换......如果他们正在寻找所有的力量和JQuery 的灵活性与更熟悉的 JavaScript-y 语法不同。否则，就像大多数其他 JS 框架一样，它们本质上是相同的。这是个人喜好。 MooTools 中的错误处理很优雅，IMO（例如，如果出现问题，请告诉我。如果我不想处理它，我会捕获异常）。 tl;博士：YMMV。

标签： javascript mootools css-selectors

【解决方案1】：

只需扩展选择器功能 - 它就是 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/

【讨论】：

谢谢！为什么这行代码不起作用？ var slider = new Fx.Slide(visibleSubMenus, {duration: 2000});
可能是因为visibleSubMenus是元素的集合，而Fx.Slide将单个元素作为第一个值。再次查看示例 URL（我已更新） - jsfiddle.net/oskar/zwFeV
好的，我更改为每个但它s just hiding the list and dont 滑动它们。这是新代码： visibleSubMenus.each(function(el) { var slider = new Fx.Slide(el, { duration: 2000 }); slider.slideOut(); });
好的，这不起作用，因为 li 的位置是：绝对的，我该如何解决？
是的，它正在工作，显然ul 的高度需要固定为特定值。这是您在玩定位时必须付出的代价。刷新示例链接以查看更新后的代码。

【解决方案2】：

Mootools 中的$$() 函数与JQuery 的$() dos-it-all 选择器基本等价。

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

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

但是，对于这种特定情况，因为 :visible 不是真正的伪类，您必须使用 Mootools 中的数组过滤器来近似它。

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

您可能会考虑使项目“不可见”的其他因素，在这种情况下，您可以相应地将它们添加到过滤功能中。

【讨论】：

我会改变我的问题 - 我怎样才能在我的页面上获得所有可见的 ul？在 jQuery 中我可以使用 'ul:visible'。
我提出了适合您的情况的编辑。 :visible 不是标准的伪类，所以你必须在 Mootools 中发挥创造力。