将jQuery悬停事件绑定到多个DOM元素

Question

我有一个无序的元素列表，我想将悬停事件绑定到每个元素。 HTML结构如下：

<ul> 
    <li id="url_1">item 1</li> 
    <li id="url_2">item 2</li> 
</ul> 

我认为使用for循环是最好的方法。所以我的jQuery代码如下：

for(i=1;i<=2;i++){ 
    $("li#url_"+i).hover(function() { /* do something on mouseenter */}, function() { /* do something on mouseleave */ }); } 

这应该绑定悬停事件给李＃URL_1 &李＃url_2。但它不工作！

您能否建议正确（而且更有效率）的方式来做到这一点？

干杯， 卡尔蒂克饶

Answer 1

第一，不要忘记把你的jQuery代码$(document).ready(function { })块里面，所以它只能在DOM加载执行。

其次，为什么不分配ID，或class，或任何东西可以帮助你访问UL元素在上面，然后做到这一点：

$("ul#yourId > li").hover(function() { ............. }, function() { ... }); 

，而不是建立一个循环。在事件处理程序中，使用this访问li元素，并在需要时查看其id。 例如，事件处理程序将分配给所有li元素，它们是该ul元素的直接子元素，yourid为id。