Функция jQuery hover с ключевым словом: 'this'

Question

У меня возникли проблемы с пониманием и использованием ключевого слова $ (this). Например, на примере класса парения из http://api.jquery.com/hover/

HTML

<ul> 
    <li>Milk</li> 
    <li>Bread</li> 
    <li class='fade'>Chips</li> 
    <li class='fade'>Socks</li> 
</ul> 

<div class='fade'>My Div<div> 

Jquery

Это добавит функции на всех <li> элементов.

$("li").hover(
    function() { 
     $(this).append($("<span> ***</span>")); 
    }, 
    function() { 
     $(this).find("span:last").remove(); 
    } 
); 

Если я хочу только добавить функцию по классу fade. я был в состоянии сделать это таким образом

$("li.fade").hover(
    function() { 
     $(this).append($("<span> ***</span>")); 
    }, 
    function() { 
     $(this).find("span:last").remove(); 
    } 
); 

Это выбирает все исчезающие классы включая DIV

$("li").hover(
     function() { 
      $('.fade').append($("<span> ***</span>")); 
     }, 
     function() { 
      $('.fade').find("span:last").remove(); 
     } 
    ); 

Почему не будет работать?

$("li").hover(
    function() { 
     $(".fade", this).append($("<span> ***</span>")); 
    }, 
    function() { 
     $(".fade", this).find("span:last").remove(); 
    } 
); 

Я учусь учиться jQuery. Благодаря!

Answer 1

Звонок $(".fade", this) будет искать элементы с классом fade внутри элемента (-ов), представленного this. Он делает то же самое, что и $(this).find(".fade").

Как this является элементом, где поднято hover событие, которое является li элементом, он не найдет ничего, как класс на этом элементе, а не на каких-либо элементов, которые являются потомками этого элемента.