title: jQuery : select specific DOM with specific HTML tag
body: <p>I have a menu</p>
  <h1>HTML</h1>
  <pre><code>&lt;li class=&quot;{{{ strpos(Request::url(), 'analytics')!==FALSE ? 'active' : ''}}}&quot;&gt;
      &lt;a href=&quot;/analytics&quot;&gt;
          &lt;i class=&quot;fa fa-bar-chart analytics&quot;&gt;&lt;/i&gt;
          Analytics
          &lt;span class=&quot;badge badge-success pull-right&quot;&gt;1&lt;/span&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/m9gNK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m9gNK.png" alt="enter image description here" /></a></p>
  <p>I've tried</p>
  <pre><code>$('i.analytics  span').text(response.count.ue_profiles.total);
  </code></pre>
  <p>I've also tried</p>
  <pre><code>$('i.analytics &gt; span').text(response.count.ue_profiles.total);
  </code></pre>
  <p>I've also tried</p>
  <pre><code>$('.analytics &gt; span').text(response.count.ue_profiles.total);
  </code></pre>
  <p>They don't seem to take effect.
  I thought jQuery uses the same selection as CSS.</p>
  <p>If I want to, I can use a <code>find('span')</code> which I know for sure, it will work, but I am curious to right to do it via selector itself.</p>
  <p>How do I overwrite that?</p>