Не могу разобраться в селекторе jQuery

Question

Итак, в основном я стараюсь, чтобы изображение категорий верхнего уровня было включено при наведении курсора на элементы подменю. Я хочу сделать это с помощью jQuery для функции наведения, но я не могу на всю жизнь получить селектор для целевых элементов подменю.

Вот код, который я пытаюсь запустить:

$(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');
   }); 
});

В этом выпадающем меню:

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

Но, как я уже сказал, я не могу определить селектор для целевых элементов этого подменю, поэтому я могу изменить src для изображения.

Это должно быть сделано через jQuery, а не через CSS (поверьте мне, я знаю, что это работает, но не так, как я должен выполнить эту задачу)

Спасибо за любую помощь.

-Seth

Answer 1

Проблема с вашим селектором, который вы используете, чтобы добраться до пользователя для зависания. Ваш селектор $ ('. Sub ul> li') ищет элемент ul внутри элемента с классом sub. Ваш элемент ul на самом деле является родным братом класса sub. Измените ваш селектор так, чтобы он выглядел как $ ('. Sub ~ ul> li'), это нацелит все ваши li правильно.

Теперь, используя то, что написал artlung, ваш селектор для возврата к изображению стрелки должен выглядеть следующим образом:

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

Как только вы доберетесь до изображения, вы сможете изменить атрибуты так, как вам нравится.

Answer 2

Я думаю, что тот факт, что изображения добавляются на лету, мешает их обнаружению jQuery. Если вы не связали события с live(), я думаю, что они пропустили.

Тем не менее, вот как я заставил его работать.

$(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);
    });
});