Get Even and Odd Elements Using MooTools

Now a days JavaScript frameworks are must required part of the website when you are about to build rich website. MooTools is one of the Good frameworks available market.

Selecting and elements using the JavaScript is common practice in this. We can perform various actions and apply styles to elements based on the element selected. MooTools uses the Slick for selecting the elements from the DOM (Document Object Model).

In this article we will see how to select [code]EVEN[/code] and [code]ODD[/code] elements from the DOM. We can get all children elements using the various methods available for selecting children elements. But for selecting only EVEN or ODD elements needs some changes in you code. :)

So lets see how to get the ONLY Even and Odd elements.

Considering you have below HTML structure of UL and LI, now we will select all even and odd li from the DOM. After selecting elements we will assign class [code]even_li[/code] to even elements and [code]odd_li[/code] to odd elements

HTML

[cc lang=”html”]

• One
• Two
• Three
• Four
• Five
• Six

[/cc]

Slick is the element selector engine used by MooTools.

Select ODD Elements using MooTools

Below code will select Odd elements from the UL and add odd_li class to that elements.

[cc lang=”javascript”]
window.addEvent(“domready”, function(){
$(“list_container”).getElements(“li:odd”).addClass(“odd_li”);
});

[/cc]

Select EVEN Elements using MooTools

Below code will select Even elements from the UL and add even_li class to that elements.

[cc lang=”javascript”]
window.addEvent(“domready”, function(){
$(“list_container”).getElements(“li:even”).addClass(“even_li”);
});
[/cc]

Conclusion

So this is the how you can select you even and odd child elements easily. MooTools uses the slick as an element selector engine which can also be used standalone. Subscribe to out RSS Feed for more javascript related tricks.