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> 

私は2つの方法を思いついた。 1つは動作しますが、もう1つは動作しません。私は現在、今やっている何を

// 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の選択は、目的のアプリケーションでは機能しません.DOMのコンテキスト外では正しく動作しません。次のように

あなたがこれを行うことができます：

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

Answer 2

このような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");