Question

if you create html layout like so

<ul>      <li class='a'></li>      <li class='b'></li>      <li class='a'></li>      <li class='b'></li>      <li class='a'></li>      <li class='b'></li>      <li class='a'></li>      <li class='b'></li> </ul> 

and try to select odd elements with ‘a’ class like so $$(‘.a:odd’) you will get empty array, and if you do $$(‘.a:even’) you will get all four li elements with ‘a’ class.. It really strange.. But im new to mootools, maybe im doing something wrong..

So my question is how to select first and third li elements with a class. I know that i can do it with function like this

$$(‘.a’).filter(function(item, index) { return index%2; }

but its too complicated for such small task as selecting odd or even elements..

Answer 1

The problem is that :odd and :even (and their CSS cousins :nth-child(odd) and :nth-child(even)) refer to the order in which the elements appear as children of their parent, not as children with that particular selector.

This worked for me (Prototype, but it looks like MooTools has similar syntax):

var odd = $$('.a').filter(function(item, index) {     return index % 2 == 0; }); var even = $$('.a').filter(function(item, index) {     return index % 2 == 1; }); 

Edit: it seems you already covered that in the question, boo on me for answering before reading fully.