jQuery to add a class to menu items?

Question

I have the following menu items:

<ul>
    <li class="static">
        <a class="static menu-item" href="/mySites/AboutUs">About Us</a>
    </li>
    <li class="static">
        <a class="static-menu-item" href="/mySite/Practices">Practices</a>
    </li>
    <li class="static">
        <a class="static-meunu-item" href="/mySite/Sectors">Sectors</a>
    </li>
</ul>

I cannot add specific background images to the menu items as they all have the same class. In order to achieve this it will be ideal if specific classes could be added for example:

<ul>
    <li class="static">
        <a class="static menu-item about-us" href="/mySites/AboutUs">About Us</a>
    </li>
    <li class="static">
        <a class="static-menu-item practices" href="/mySite/Practices">Practices</a>
    </li>
    <li class="static">
         <a class="static-meunu-item sectors" href="/mySite/Sectors">Sectors</a>
    </li>
</ul>

In the above example highlighted in red are the classes that have been added. This will then allow me to add the specific background images to each menu item.

How can I achieve this using the .addClass() method in jQuery?

Answer 1

I personally find it overkill to do such things with Javascript. Makes more sense doing it server side as it's been mentioned above. Or... CSS! You could use CSS3 pseudo classes to do this. I have created an example here

To make this work in older browsers such as IE7, make sure you add Selectivizr to your head section