JQuery悬停只适用于最后一个元素？

我使用javaScript和jQuery理解范围和生命期有点麻烦。我有一个函数，它的自定义对象的数组（GPS是组的阵列）JQuery悬停只适用于最后一个元素？

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和retreives所述currentGroup作为对象。然后它创建一个新的对象（目前混淆地命名为newGroup，将其重命名），这是一个持有li的jQuery对象。

gl是页面上的<ul>。

问题：此功能正确添加新的<li>到gl代表的<ul>表示我的列表显示所有元素。但悬停只适用于最后一个元素：如果我有2+项目，并将其悬停在其中任何一个上，我会看到最后<li>上由悬停功能创建的图标。

有没有人知道这里会出现什么问题？我猜，不管怎样，.hover不适用于该对象，而是适用于某些在遍历循环时得到更新的引用，但这纯粹是猜测。

来源

2009-10-08 Michael Stum

在您的悬停函数中捕获的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(); } 
);

来源

2009-10-08 15:57:04 tvanfosson

$（this）did the trick！我现在还有其他一些问题（currentGroup.getID（）也解决了循环中的最后一个项目），但我想我大致了解它现在的工作原理。谢谢！ – 2009-10-08 16:11:28

现在我想我明白了。由于悬停函数是一个“函数指针”，因此它在悬停时进行评估，因此内部变量（newGroup和currentGroup.getID（））引用悬停时当前的对象，而不是当前创建的对象。有道理，并希望是正确的:) – 2009-10-08 16:24:24

是的。我已经更新了示例以展示如何直接从li元素获取组ID。 – tvanfosson 2009-10-08 16:55:11

JQuery悬停只适用于最后一个元素？

回答

相关问题