Find topmost UL element of list item

Find topmost UL element of list item


Hi all,
I am relatively new to JQuery but already getting well into it and
discovering the possibilities. I have an issue relating to traversing
a set of nested <ul> elements and I am hoping that it is relatively
simple to sort out. For info, here's the background on what I am
trying to do...
I have a server-side control which will build navigation items based
on the site map. The top level elements are rendered as <h3>tags
containing a link. Sub-level elements are rendered as nested <ul>s.
This enables me to apply an accordion effect to the lists, which is
working well. When the server-side control renders the items, it will
add a CSS class to the list item containing the link referencing the
current page. What I would like to do is get the topmost parent <ul>
element of that <li> in order to display it as the default list in the
accordion.
I have posted some sample code below. What I want to do using JQuery
here is to find the <li> element with the CSS class "selected", and
then go up the tree to find the first <ul> after the main <h3>. The
<li> could be any number of levels deep.
Hopefully I am making sense and thank you in advance for any help.
Sample code:
<div id="leftNav">
    <h3><a href="#">Top Level 1</a></h3>
    <ul>
        <li>
            <a href="#">Link</a>
            <ul>
                <li>
                    <a href="#">Link</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Link</a>
        </li>
    </ul>
    <h3><a href="#">Top Level 2</a></h3>
    <ul>
        <li>
            <a href="#">Link</a>
        </li>
        <li>
            <a href="#">Link</a>
            <ul>
                <li>
                    <a href="#">Link</a>
                </li>
            </ul>
        </li>
        <li class="selected">
            <a href="#">Link</a>
        </li>
        <li>
            <a href="#">Link</a>
            <ul>
                <li>
                    <a href="#">Link</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Link</a>
        </li>
        <li>
            <a href="#">Link</a>
        </li>
    </ul>
    <h3><a href="#">Top Level 3</a></h3>
    <ul>
        <li>
            <a href="#">Link</a>
        </li>
        <li>
            <a href="#">Link</a>
            <ul>
                <li>
                    <a href="#">Link</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Link</a>
        </li>
    </ul>
</div>