带有关键字的jQuery悬停功能：'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();
    }
);

如果我只想在淡入淡出类上添加函数。 我可以这样做

$("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) 将在this 表示的元素内查找类fade 的元素。它与$(this).find(".fade") 的作用相同。

由于this 是引发hover 事件的元素，它是一个li 元素，所以它不会找到任何东西，因为该类在该元素上，而不是在该元素的任何子元素上元素。