Get Even and Odd Elements Using MooTools

  • Avinash
  • 1
  • Feb 05, 2012
  • Tips & Tricks

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 EVEN and ODD 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 even_li to even elements and odd_li to odd elements

HTML

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  <ul id="list_container">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
  </ul>

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.

window.addEvent("domready", function(){ $("list_container").getElements("li:odd").addClass("odd_li"); });
  window.addEvent("domready", function(){
    $("list_container").getElements("li:odd").addClass("odd_li");
  });

Select EVEN Elements using MooTools

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

window.addEvent("domready", function(){ $("list_container").getElements("li:even").addClass("even_li"); });
  window.addEvent("domready", function(){
    $("list_container").getElements("li:even").addClass("even_li");
  });

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.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by: