將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 。