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 two: grouping! 
var listChildren = $$("ul.stripe > li"); 
var oddChildren = listChildren 
    .findAll(function(el) { return el.visible(); }) 
    .eachSlice(2, function(el) { 
     el[0].addClassName("odd");  
    }); 

이 코드는 것 같다

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

는 내가 현재 지금 뭐하는 거지하면 다음과 같다. 누구든지 이것을 달성하기위한 더 좋은 방법을 제안 할 수 있습니까?

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

두 조건을 병합 할 수 없습니까?

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