javascript - JQuery hover 只适用于最后一个元素？

Question

我在理解使用 javaScript 和 jQuery 的作用域和生命周期时遇到了一些困难。我有一个接受自定义对象数组的函数(gps 是一组组)

var currentGroup;
for(var index = 0, length = gps.length; index < length; ++index)
{
    currentGroup = gps[index];
    var newGroup = $('<li id="groupno-' + currentGroup.getID() + '"><span class="group">Group ' + currentGroup.getID() +'</span></li>');

    newGroup.hover(
        function() {newGroup.find("span.group").append(GetGroupActionsContainer(currentGroup.getID()));},
        function() {newGroup.find("span.group > .GroupActionsContainer").remove();}
    );

    gl.append(newGroup);
    gl.treeview({
        add: newGroup
    });
}

所以这通过 gps 查找并将 currentGroup 作为对象检索。然后它创建一个新对象(目前容易混淆地命名为 newGroup，将重命名它)这是一个包含 li 的 jQuery 对象。

gl 是一个 <ul>在页面上。

问题:这个函数正确地添加了新的<li>到 <ul>由 gl 表示——我的列表显示了所有元素。但是悬停只适用于最后一个元素:如果我有 2 个以上的项目并且我将鼠标悬停在其中任何一个上，我会在最后一个 <li> 上看到由悬停功能创建的图标。 .

有谁知道这里可能出了什么问题？我猜想，不知何故，.hover 不适用于对象，而是应用于在循环迭代时更新的某些引用，但这纯粹是猜测。

Answer 1

悬停函数中捕获的 newGroup 引用循环中创建的最后一个。在悬停函数中使用 $(this) 来引用悬停的元素。

newGroup.hover(
    function() {
        var $this = $(this);
        var groupID = $this.attr('id').replace( /groupno-/, '');
        $this.find("span.group").append(GetGroupActionsContainer(groupID));
    },
    function() { $(this).find("span.group > .GroupActionsContainer").remove(); }
);