jQuery: Trouble Traversing

Question

I have tried to find some decent documentation on traversing in jQuery, but have not found a decent resource, any suggestions would be much appreciated.

I am trying to create a simple animation for a menu.

I have a simple menu:

<ul class='contentNav'>
 <li><a href='#'>One</a>
 <li><a href='#'>Two</a>
 <li><a href='#'>Three</a>
 <li><a href='#'>Four</a>
</ul>

And a simple jquery function to change the background color of the tag:

$(document).ready(function(){

   $(".contentNav a").hoverIntent(
   function(over) {
     $(this).animate({backgroundColor: "#844"}, "fast");
     $(this).parent().find("li a").animate({backgroundColor: "#090"}, "fast");
   },
   function(out) {
     $(this).animate({backgroundColor: "#000"}, "fast");
     $(this).parent().find("li a").animate({backgroundColor: "#000"}, "fast");
   });
});

The trouble is with the lines:

$(this).parent().find("li a").animate({backgroundColor: "#090"}, "fast"); 
$(this).parent().find("li a").animate({backgroundColor: "#000"}, "fast");

I am trying to select all of the link tag items that are not currently hovered over and set their background color. How do I do this.

Thanks.

---

UPDATE

---

I have taken all of the recommendations and come up with the following code:

$(this).parent().parent().find("a").not(this).animate({backgroundcolor: "#555"}, 100)

Answer 1

Your lines are missing an extra parent:

$(this).parent().parent().find("li a").animate({backgroundColor: "#090"}, "fast"); 
$(this).parent().parent().find("li a").animate({backgroundColor: "#000"}, "fast");

Since your initial selector is on the 'a' tag, you want to go up once to the 'li' tag and then again to the containing div if you want to then use the find("li a") selector.

Answer 2

From the hoverIntent docs, the hoverIntent call takes a configuration object, not two methods. Try this:

$(document).ready(function(){
  $(".contentNav a").hoverIntent({
    over: function() {
      $(this).animate({backgroundColor: "#844"}, "fast");
      $(this).parent().parent().find("li a").not(this).animate({backgroundColor: "#090"}, "fast");
    },
    out: function() {
      $(this).parent().parent().find("li a").animate({backgroundColor: "#090"}, "fast");
    }
  });
});

Hat tip to richsage for his answer, which identified the grandparent problem. And another to Vertigo for the idea to use the temporary class and not.

Answer 3

If you want to select all but hovered element you could do something like this:

// first add class to hovered element when hovering over
$(this).addClass("hovered");
// then select all but that one
$(this).parent().parent().find("li a").not(".hovered").animate({backgroundColor: "#090"}, "fast");

// and remember to remove class when hovering out
$(this).removeClass("hovered");

Answer 4

Vertigo's idea of using a temporary class should work for selecting all but the hovered element (+1 for that).

However, another way that should also work is to use the filter() method, and compare dom element instances. This approach may be marginally faster than adding and removing class names, but if there's a performance difference, it is likely very small.

$(document).ready(function(){
   $(".contentNav a").hoverIntent(
   function(over) {
     var current = this;
     $(this).animate({backgroundColor: "#844"}, "fast");
     $(this).parent().parent()
         .find("li a")
         .filter(function() { return this !== current; })
         .animate({backgroundColor: "#090"}, "fast");
   },
   function(out) {
     var current = this;
     $(this).animate({backgroundColor: "#000"}, "fast");
     $(this).parent().parent()
         .find("li a")
         .filter(function() { return this !== current; })
         .animate({backgroundColor: "#000"}, "fast");
   });
});