jQuery悬停函数关键字：“this”

Question

我对$(this)关键字的理解和使用有困难。例如，在http://api.jquery.com/hover/的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。谢谢！

- duyn9uyen

---

你尝试过这样吗？$(".fade", $(this)).append($(" ***")); - awbergs

不起作用。http://jsfiddle.net/W5AQV/5/ - duyn9uyen

@awbergs：这并没有什么区别。内容可以是一个元素，也可以是包含该元素的jQuery对象，结果相同。 - Guffa

Answer 1

调用$(this)中的$(".fade")将查找元素中带有fade类的元素。它与$(this).find(".fade")相同。

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

- Guffa

---

哇！你在几秒钟内就回答了，而我花了大约10分钟来构建那个问题。非常感谢你！ - duyn9uyen