How to stop jQuery from matching multiple elements

Question

I am trying to create a rollover effect with jQUery. I have similar things, however because I am trying to do a mouseover with a an object that has a link in it I am having problems.

I have a level-2 nav bar. The placeholder's are table cells (bad I know - but it's already done this way). I want to change the background from white (#FFF) to dark grey (#999). I also want to change the text from dark grey to white.

Since the text is a link, I have to specify a class within the link tag to ensure that it is dark grey without an underline and doesn't default to the blue, underlined text.

The code I have written causes all the links of class="subLink" to change to being white from grey when anyone of them is "hovered over". I only want this to happen for the particular item in question - that is the background should become grey and the link should become white.

HTML and jQuery are below:-

<td class="subMenuTD"><a href="newsletter.html" class="subLink">Newsletter</a></td>
<td class="subMenuTD"><a href="news_archive.html" class="subLink">News Archive</a></td>
<td class="subMenuTD"><a href="events.html">Events</a></td>

---

$(".subMenuTD").hover(
                  function() { 
                     $(this).addClass("subMenuTDActive");
                     $(".subLink").addClass("subLink-white");
                  },
                  function() {   
                     $(this).removeClass("subMenuTDActive");
                     $(".subLink").removeClass("subLink-white");
       }
               );

Answer 1

Add a context parameter to the $() function.

$(".subLink") --> $(".subLink", this) will make jQuery only match ".subLink"s that are children of the given context element.

Answer 2

You can make this even simpler by not adding the class to the link, since you are already adding a class to the parent td, and can thus target the link by using CSS:

Code before

$(".subMenuTD").hover(                       
  function() {
     $(this).addClass("subMenuTDActive");                                
     $(".subLink").addClass("subLink-white");
  },
  function() {
     $(this).removeClass("subMenuTDActive");                                
     $(".subLink").removeClass("subLink-white");
  }
);

Code after

$(".subMenuTD").hover(                       
  function() {
     $(this).addClass("subMenuTDActive");     
  },
  function() {
     $(this).removeClass("subMenuTDActive");    
  }
);

New CSS rule

.subMenuTDActive .subLink {
   /* Add hover link styling here */
}

This will work because ".subMenuTDActive .subLink" has a higher specitivity than ".subLink", and will thus override the ".subLink" rule.

Answer 3

It's not an answer to the question that you're asking,nor even a criticism, but is there a reason you don't want to use a:hover or even td:hover to achieve your aim?

Answer 4

You can use AKX's solution, or:

$(".subMenuTD").hover(
                    function() { 
                            $(this)
                               .addClass("subMenuTDActive")
                               .children(".subLink")
                               .addClass("subLink-white");
                    },
                    function() {            
                            $(this)
                                .removeClass("subMenuTDActive");
                                .children(".subLink")
                                .removeClass("subLink-white");
                    }
            );

Answer 5

AKX's solution is correct. Alternatively, you can do:

$(this).children(".subLink")

Answer 6

I'm with drthomas. Why on earth are you using javascript at all when you can just use css?

 .subMenuTD:hover {
                   background-color: #ccc;
                   }

 .subLink:hover {
                 color: #fff;
                 }

Or even better (me thinks), get rid of styling the td elements that you shouldn't have and ought to be working on removing, set the links as display:block, and then you can declare the hover style under one element:

 .subLink {
          display: block;
          }

  .subLink:hover {
                 background-color: #ccc;
                 color: #fff;
                 }

And unless you have no control over the html or you have something mission-critical that relies on the markup staying the same, "it's already using tables, i know, sue me" is a really poor excuse. Here is your sub-menu, sans table:

<ul class="subMenu">
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="news_archive.html">News Archive</a></li>
<li><a href="events.html">Events</a></li>
</ul>

That took about 30 seconds. Now here is the CSS for the navbar/rollover:

 .subMenu li {
          display: inline;
          list-style: none;
          }

  .subMenu a {
          color: #000;
          background-color: #fff;
          text-decoration: none;
          display: block;
          }

   .subMenu a:hover {
          color: #fff;
          background-color: #ccc;
          }

That took maybe a minute more, because I had to make it look pretty.

I'm not trying to be a bully or come down on you, but non-semantic code is not something that should be encouraged, and if you are looking for help with something, I wouldn't feel right giving it knowing it was going to be used on a site that wasn't compliant.