JQuery How to select only the current li and not parent.

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

I think the issue is with eventbubbeling, I played around with it a bit at jsFiddle and have found some minor improvements. Try this for the jQuery part:

$(document).ready(function() {
  $('.currentlist li').hover(function(evt) {
    $(this).children('a.world').addClass('active');
      evt.stopPropagation()
  }, function(evt) {
    $(this).children('a.world').removeClass('active');
  });
});​

Answer 2

This isn't the nicest of solutions but maybe it will help you find a nicer way.

jsfiddle.net/s7TaT

Answer 3

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.

Answer 4

The problem here is, that if you are hovering a "child li", you are still hovering its parent. So your jQuery function does exactly what you tell it :-)

If you only want to add the 'active' css class to the actual "li", then you must remove the 'active' class from all of its "parent lis".

I would recommend to not add the class to the a tag, but to the li itself (it's actually the hovered li that is active, not only one link on it)

Try it here: http://jsfiddle.net/rCYAm/