Can't figure out the jQuery selector

Question

So Basically I am trying to keep the top level categories image of a down arrow turned on while hovering over the submenu's elements. I want to do this through jQuery on a hover function however I cannot for the life of me get a selector to target the sub menu items.

Here is the code I am trying to run:

$(document).ready(function() {
    $('.sub ul > li').hover(function() {
        $(this).parents('a.sub').attr('src', 'images/DownArrow.png');
},
function(){
     $(this).parents('a.sub').attr('src', 'images/DownArrowOff.png');
   }); 
});

On This Drop Down Menu:

http://www.seth-duncan.com/Test/TestMenu.html

But as I said I can't figure out the selector to target those submenu items so I can change the src for the image.

This must be done through jQuery not through CSS (believe me I know it works but not with the way I have to accomplish this task)

Thanks for any and all help.

-Seth

Answer 1

I think the fact that the images are added on the fly interferes with them being found by jQuery. Unless you bound the events with live() I think they get missed.

That said, here's how I got it to work.

$(document).ready(function(){
    var downArrow    = '/Test/images/DownArrow.png';
    var downArrowOff = '/Test/images/DownArrowOff.png';

    $("#menu li a.sub").hover(function () {
     $(this).find('img').attr('src',downArrow);
    }, function () {
     $(this).find('img').attr('src',downArrowOff);
    });
    $("#menu li ul").hover(function () {
     $(this).parents('li:has(a)').children('a.sub').find('img').attr('src', downArrow);
    }, function () {
     $(this).parents('li:has(a)').children('a.sub').find('img').attr('src', downArrowOff);
    });
});

Answer 2

The problem is with your selector you are using to get to the li's to hover. Your selector of $('.sub ul > li') is looking for a ul element inside of an element with a class of sub. Your ul element is actually a sibling of the class sub. Change your selector to look like $('.sub ~ ul > li') this will target all your li's correctly.

Now, using what artlung posted, your selector to get back up the arrow image should look like the following:

$(this).parents('li:has(a)').children('a.sub').find('img')

Once you get to the image, you can then change the attributes however you like.