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, собирающийся переименовать его), который является объектом jQuery, содержащим li.

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