将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和li＃url_2。 但这不起作用！

您能建议正确（更有效）的方法吗？

干杯，Kartik Rao

Answer 1

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

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

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

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