将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 */ }); }

这应该将悬停事件绑定到li＃url_1＆amp;李＃url_2。但它没有用！

您能否建议采用正确（且更有效）的方式？

干杯， Kartik Rao

Answer 1

首先，不要忘记将jQuery代码放在$(document).ready(function { })块中，因此它只会执行加载的DOM。

其次，为什么不分配ID或class，或者什么可以帮助您访问顶部的UL元素，然后执行此操作：

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

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