Question

How do you select using JQuery the current li and not its parents.

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.

I would like to only display the ‘world’ in the current li.

How do I do this?

style:

a.show-anyway
{
  display: block;
}
a.world
{
  display: none;
}
a.active
{
  display: block;
}

list items:

<ul class="currentlist">
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a>
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a>
 <ul>
   <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
   <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
 </ul>
</li>
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a>
 <ul>
   <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
   <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
 </ul>
</li>
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>

JQuery:

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

Answer 1

You need to crawl the parents and add/remove the class when entering/leaving the child, like this:

$(function() {
  $('.currentlist li').hover(function() {
    $(this).children('a').addClass('active').end()
           .parents().children('a').removeClass('active');
  }, function() {
    $(this).children('a').removeClass('active').end()
           .parents().children('a').addClass('active');
  });
});​

You can give it a try here, this crawls the parents and removes the class from their <a> children when entering, and restores it when leaving, give the demo a try, I think this is what you’re after.