jquery traversing an asp.net menu
<p>I feel like this should be an easy task, but I am having problems. I have a drop down menu that is wrapped in an unordered list (generated by an asp.net menu control) and I am trying to add extra highlighting to a selected link's parent link via jquery. Here is the generated HTML:</p>

<pre><code>&lt;div id="MainMenu" class="mainMenuControl"&gt;
        &lt;ul class="level1 static" role="menubar"&gt;
            &lt;li class="static" role="menuitem"&gt;&lt;a class="level1 static selected" href="/default.aspx"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="has-popup static" aria-haspopup="MainMenu:submenu:3" role="menuitem"&gt;&lt;a
                class="level2 static" href="/store/prodcut.aspx"&gt;Product 1&lt;/a&gt;
                &lt;ul id="MainMenu:submenu:3" class="level3 dynamic"&gt;
                    &lt;li class="dynamic" role="menuitem"&gt;&lt;a class="level3 dynamic" href="/store/product/category1.aspx"&gt;
                        Category 1&lt;/a&gt; &lt;/li&gt;
                    &lt;li class="dynamic" role="menuitem"&gt;&lt;a class="level3 dynamic" href="/store/product/category2.aspx"&gt;
                        Category 2&lt;/a&gt; &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="has-popup static" aria-haspopup="MainMenu:submenu:10" role="menuitem"&gt;&lt;a
                class="level2 static" href="/store/paymentoptions.aspx"&gt;Ministries&lt;/a&gt;
                &lt;ul id="MainMenu:submenu:10" class="level3 dynamic"&gt;
                    &lt;li class="dynamic" role="menuitem"&gt;&lt;a class="level3 dynamic" href="/store/paymentoptions/option1.aspx"&gt;
                        Option 1&lt;/a&gt; &lt;/li&gt;
                    &lt;li class="dynamic" role="menuitem"&gt;&lt;a class="level3 dynamic" href="/store/paymentoptions/option2.aspx"&gt;
                        Option 2&lt;/a&gt; &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>

<p>So, whatever page the current user is on, the corresponding menu link will have the class 'selected.' But, if they are on a sub page of one of the main menu choices, I would like the link in the drop down menu as well as it's parent link to both have the 'selected' class.</p>

<p>I was attempting to add classes to the links based on parent/child url paths but I'm running into problems because I am using url rewriting in asp.net so that any trailing slashes, default documents (index.html, default.aspx) or url endings (.html, .aspx, etc) are removed.</p>

<p>I tried this, but, as I said, I can't get it to work:</p>

<pre><code>$('.mainMenuControl ul a').each(function () {
            if ($(this).attr('href') == window.location.pathname) {
                $(this).addClass('selected');
                if ($(this).parent('li').parents('.mainMenuControl ul.level1 li').length) {
                    $(this).parent('li').parents('.mainMenuControl ul.level1 li').find('a.static').addClass('selected');
                }
            }
        });
</code></pre>

<p>Any suggestions would be appreciated, thanks!</p>
