jquery - 带有关键字的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>

查询

这将在所有<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)查找具有类的元素。它与.fadethis$(this).find(".fade")

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