PrototypeJS: выбор нечетного подмножества видимых дочерних элементов

Это связано с моим предыдущим вопросом о выборе видимых элементов. Теперь вот поворот: допустим, я хочу выбрать нечетные дочерние элементы только из набора видимых дочерних элементов элемента. Как лучше всего это сделать?

Изменить: вот пример моего ввода и ожидаемого результата.

<!-- 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
person Zack The Human    schedule 17.07.2009    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Выбор CSS не будет работать для желаемого приложения, он не работает правильно в массиве вне контекста DOM.

Вы можете сделать это следующим образом:

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

arrow_upward
0
arrow_downward

Разве вы не можете объединить два условия, как это?

var listChildren = $$("ul.stripe > li");
var oddChildren = allChildren
  .findAll(function(el) { return el.visible() && el.match("li:nth-child(odd)"); })
oddChildren.invoke("addClassName", "odd");
person varzan    schedule 17.07.2009
comment
Да. Однако проблема в том, что я хочу сначала выбрать видимые элементы, а затем из тех выбрать нечетные элементы. Проблема с этим (любым с моей версией findAll с цепочкой) заключается в том, что нечетность элементов проверяется за пределами этого видимого подмножества дочерних элементов. - person Zack The Human; 17.07.2009