PrototypeJS：选择可见子女的奇数子集

Question

这与我的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");  
    }); 

此代码似乎是它可以改善。任何人都可以提出一个更好的方法来完成这个？

Answer 1

CSS select不适用于您希望的应用程序，它不能在DOM上下文之外的Array上正常工作。

你可以做到这一点，如下所示：

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

Answer 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");