title: Get Exact child of their parent element. Jquery
body: <p>Well I was having a hard time to call a certain element. 
  What I was supposed to do is get the </p>
  
  <p><code>li.parent.iced-tea span a</code> element. But the problem is it also <strong>affects</strong> the <strong>LEVEL2</strong> li span a tag.</p>
  
  <pre><code>&lt;li class="level1-parent has-children level1 parent iced-tea open"&gt;
  
        &lt;span class="vertnav-cat"&gt;&lt;a href="/tea/iced-tea/iced-gold"&gt;&lt;span&gt;iced tea&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
  
      &lt;ul&gt;
        &lt;li class="first level2-active level2 active iced-ceylon-gold"&gt;
          &lt;span class="vertnav-cat"&gt;&lt;a href="/tea/iced-tea/iced-silver"&gt;&lt;span&gt;iced ceylon silver&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
  
        &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>So I was wondering, how to get the exact child without going to other element.</p>
  
  <p>Here's the code that I'm calling. </p>
  
  <pre><code>$("#vertnav ul li.iced-tea span a")
  </code></pre>
  
  <p>Any solution for this stuff?</p>