jQuery to dynamically add classes to a nested list item to flag menus that have child nodes
<p>The markup below is an example of a dynamically generated menu that is styled with css as a flyout. I'm just trying to add arrows to show where menus have child menus.</p>

<p>Is it possible, via jQuery, to add a class ("hasChild top") to the top level elements that have submenus and a class ("hasChild sub") to the lower level elements that have children?</p>

<pre><code>&lt;ul id="menu-site-menu"&gt;
    &lt;li"&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
        &lt;ul class="sub-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Our Charity Partners&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Buy Apparel&lt;/a&gt;
        &lt;ul class="sub-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Benevolent Elephant&lt;/a&gt;
                &lt;ul class="sub-menu"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Benevolent Elephant Short Sleeve&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Benevolent Elephant Long Sleeve&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Eagle-Spirit&lt;/a&gt;
                &lt;ul class="sub-menu"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Eagle-Spirit Short Sleeve&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Eagle-Spirit Long Sleeve T-Shirts&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Customer Service&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>So. in this example, the jQuery would add the "hasChild top" class to "About Us" and "Buy Apparel"</p>

<p>It would add the "hasChild sub" class to "Benevolent Elephant" and "Eagle Spirit"</p>
