带有关键字 : 'this' 的 jQuery悬停函数

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

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

如this是 hover 所在的元素引发事件，这是 li元素，它不会找到任何内容，因为该类位于该元素上，而不是该元素的子元素上。