jQuery检查实例的编号

所以我猜这主要是因为我不知道如何在谷歌上找到它，但基本上我正在尝试构建一个菜单，为每个菜单项使用不同的悬停背景色。到目前为止，我有：

$(function() {
    $('li').hover(function() {
        $(this).animate({backgroundColor:'#f00'},200);
    }, function() {
        $(this).animate({backgroundColor:'#eee'},200);
    });
});

---

我想根据选择的菜单项使用不同的值替换“#f00”。我知道我可以使用：eq为每个项目编写不同的方法，但如果有更简洁的方法，那将是首选。我的想法就像一个颜色值数组，然后函数将用array[number of instance]替换实例的数量。希望这是有意义的…

像这样的东西应该有用：

$(function() {
    var colors = ['#FFF', '#GGG', ...];

    $('li').hover(function() {
        $(this).animate({backgroundColor: colors[$(this).index()]}, 200);
    }, function() {
        $(this).animate({backgroundColor: '#eee'},200);
    });
});

$（this）.index（）

返回当前元素相对于其父元素的索引

---

稍微干净一点的方法是使用

数据

属性：

HTML：

<li data-hover="#FFF">...</li>
<li data-hover="#GGG">...</li>

$(function() {
    $('li').hover(function() {
        $(this).animate({backgroundColor: $(this).data('hover')}, 200);
    }, function() {
        $(this).animate({backgroundColor: '#eee'},200);
    });
});

---

正是我想要的。谢谢