title: Javascript/jQuery select the first anchor child in nested rows
body: <p>I have this code:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="open-submenu"&gt;&lt;a href="javascript:void(0)"&gt;HERE&lt;/a&gt;            
      &lt;ul class="submenu"&gt;
        &lt;li&gt;&lt;a href=#&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=#&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=#&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="open-submenu"&gt;&lt;a href="javascript:void(0)"&gt;HERE&lt;/a&gt;            
      &lt;ul class="submenu"&gt;
        &lt;li&gt;&lt;a href=#&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=#&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=#&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;             
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to append, in javascript, a "+" char just next to the "HERE" text. I want also to add it inside a span element.</p>
  
  <p>I tried <code>$('.open-submenu a:first').append("&lt;span class='open-submenu-sym'&gt;+&lt;/span&gt;");</code> but this affect only the first <code>open-submenu</code>;</p>
  
  <p>I tried also <code>$('.open-submenu').append("&lt;span class='open-submenu-sym'&gt;+&lt;/span&gt;");</code> but this will affect ALL the anchors, even the nested anchors.</p>
  
  <p>How can I append the span only inside the two <code>open-submenu</code>'s anchors?</p>