title: How to get the text of a child element of a list using jQuery
body: <p>I'm trying to get the text of a child element of  list. But I'm able to access only the parent element I don't know how to access the child element .</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="nav nav-list"&gt;
     &lt;li class="active"&gt;
        &lt;a href="javascript:void(0);"&gt;
        &lt;i class="icon-dashboard"&gt;&lt;/i&gt;
        &lt;span class="menu-text"&gt; Dashboard &lt;/span&gt;
        &lt;/a&gt;
     &lt;/li&gt;
     &lt;li&gt;
        &lt;a class="dropdown-toggle" href="javascript:void(0);"&gt;
        &lt;i class="icon-text-width"&gt;&lt;/i&gt;
        &lt;span class="menu-text"&gt; posts &lt;/span&gt;
        &lt;b class="arrow icon-angle-down"&gt;&lt;/b&gt;
        &lt;/a&gt;
        &lt;ul class="submenu"&gt;
           &lt;li&gt;
              &lt;a href="javascript:void(0);"&gt;
              &lt;i class="icon-text-width"&gt;&lt;/i&gt;
              Add New Post
              &lt;/a&gt;
           &lt;/li&gt;
           &lt;li&gt;
              &lt;a href="javascript:void(0);"&gt;
              &lt;i class="icon-text-width"&gt;&lt;/i&gt;
              Blog
              &lt;/a&gt;
           &lt;/li&gt;
           &lt;li&gt;
              &lt;a href="javascript:void(0);"&gt;
              &lt;i class="icon-desktop"&gt;&lt;/i&gt;
              News Letter
              &lt;/a&gt;
           &lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And jQuery</p>
  
  <pre><code>$(document).on('click', '.nav-list &gt; li', function(){
      $('.nav-list &gt; li').removeClass('active');
      $(this).addClass('active');
      var text=$('.active &gt;a &gt;span').text();
      alert(text);
  });
  </code></pre>
  
  <p>Any help would be appreciated.</p>