JQuery How to select only the current li and not parent
<p>How do you select using JQuery the current li and not its parents.</p>

<p>In my sample below, when I hover over a li that has a parent li the 'world' gets displayed on the parent as well as the current li.</p>

<p>I would like to only display the 'world' in the current li.</p>

<p>How do I do this?</p>

<p>style:</p>

<pre><code>a.show-anyway
{
  display: block;
}
a.world
{
  display: none;
}
a.active
{
  display: block;
}
</code></pre>

<p>list items:</p>

<pre><code>&lt;ul class="currentlist"&gt;
&lt;li&gt;&lt;a href="#" class="show-anyway"&gt;hello&lt;/a&gt;&lt;a href="#" class="world"&gt;world&lt;/a&gt;
&lt;li&gt;&lt;a href="#" class="show-anyway"&gt;hello&lt;/a&gt;&lt;a href="#" class="world"&gt;world&lt;/a&gt;
 &lt;ul&gt;
   &lt;li&gt;&lt;a href="#" class="show-anyway"&gt;hello&lt;/a&gt;&lt;a href="#" class="world"&gt;world&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#" class="show-anyway"&gt;hello&lt;/a&gt;&lt;a href="#" class="world"&gt;world&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="show-anyway"&gt;hello&lt;/a&gt;&lt;a href="#" class="world"&gt;world&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="show-anyway"&gt;hello&lt;/a&gt;&lt;a href="#" class="world"&gt;world&lt;/a&gt;
 &lt;ul&gt;
   &lt;li&gt;&lt;a href="#" class="show-anyway"&gt;hello&lt;/a&gt;&lt;a href="#" class="world"&gt;world&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#" class="show-anyway"&gt;hello&lt;/a&gt;&lt;a href="#" class="world"&gt;world&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="show-anyway"&gt;hello&lt;/a&gt;&lt;a href="#" class="world"&gt;world&lt;/a&gt;&lt;/li&gt;
</code></pre>

<p></p>

<p>JQuery:</p>

<pre><code>$(document).ready(function() {
  $('.currentlist li').hover(function() {
    $(this).find('a').addClass('active');
  }, function() {
    $(this).find('a').removeClass('active');
  });
});
</code></pre>
