[jQuery] Newbie Question: Finding and manipulating an element

[Aaron Johnson]

Hello...

I have an unordered list containing nested lists...

<ul class="foo">
    <li><a title="Announcements1" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
        </ul>
    </li>
    <li><a title="Announcements2" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
        </ul>
    </li>
    <li><a title="Announcements3" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
        </ul>
    </li>
</ul>

The top level list has an ID and associated css, I'd like to add a class to
each of the nested <ul> elements in order to style them differently. I
cannot manually add a class so wondered if I could do it with jQuery.

I'm looking for a result like this:

<ul class="foo">
    <li><a title="Announcements1" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul class="bar">
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
        </ul>
    </li>
    <li><a title="Announcements2" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul class="bar">
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
        </ul>
    </li>
    <li><a title="Announcements3" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul class="bar">
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
        </ul>
    </li>
</ul>

Thanks for your help!

Aaron