javascript - JQuery悬停仅适用于最后一个元素？

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(); }
);