PrototypeJS：选择可见孩子的奇数子集答案

【问题标题】：PrototypeJS: Selecting the odd subset of visible childrenPrototypeJS：选择可见孩子的奇数子集
【发布时间】：2011-12-28 01:23:03
【问题描述】：

这与我的previous question about selecting visible elements 有关。现在，转折点是：假设我只想从元素的可见子元素集中选择奇数子元素。最好的方法是什么？

编辑：这是我的输入和预期输出的示例。

<!-- A list with some visible and invisible children -->
<ul class="stripe">
    <li>Visible 1</li>
    <li style="display:none;">Visible 2</li>
    <li style="display:none;">Visible 3</li>
    <li>Visible 4</li>
    <li style="display:none;">Visible 5</li>
    <li>Visible 6</li>
    <li>Visible 7</li>
</ul>

<!-- Only the visible children. -->
<li>Visible 1</li>
<li>Visible 4</li>
<li>Visible 6</li>
<li>Visible 7</li>

<!-- The "odd" visible children. -->
<li>Visible 1</li>
<li>Visible 6</li>

我想出了两种方法。一种有效，另一种无效。

// Method one: Returns the odd children whether they are visible or not. :(
var listChildren = $$("ul.stripe > li");
var oddChildren = allChildren
  .findAll(function(el) { return el.visible(); })
    .findAll(function(el) { return el.match("li:nth-child(odd)"); });
oddChildren.invoke("addClassName", "odd");

我现在正在做的事情如下：

// Method two: grouping!
var listChildren = $$("ul.stripe > li");
var oddChildren = listChildren
  .findAll(function(el) { return el.visible(); })
    .eachSlice(2, function(el) {
      el[0].addClassName("odd");    
    });

此代码似乎可以改进。任何人都可以提出更好的方法来实现这一点吗？

【问题讨论】：

标签： javascript css-selectors prototypejs

【解决方案1】：

CSS 选择不适用于您想要的应用程序，它无法在 DOM 上下文之外的数组上正常工作。

你可以这样做：

var index = 0;
var myChildren = $$("ul.stripe > li")
    .select(function(e) { return e.visible(); })
    .select(function(e) {return ++index % 2 == 1; });

【讨论】：

【解决方案2】：

不能这样合并两个条件吗？

var listChildren = $$("ul.stripe > li");
var oddChildren = allChildren
  .findAll(function(el) { return el.visible() && el.match("li:nth-child(odd)"); })
oddChildren.invoke("addClassName", "odd");

【讨论】：

是的。但是，问题是我想先选择可见元素，然后从那些中选择“奇数”元素。这个问题（我的链式 findAll 版本中的任何问题）是元素“奇数”正在“可见”子集之外进行测试。