Bind jQuery hover event to multiple DOM elements
<p>I've an unordered list of elements and I want to bind hover event to each of these elements. The HTML structure is as follows : </p>

<pre><code>&lt;ul&gt;
  &lt;li id="url_1"&gt;item 1&lt;/li&gt;
  &lt;li id="url_2"&gt;item 2&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I figured using a for-loop would be the best way to do it. So my jQuery code is as follows:</p>

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

<p>This should bind the hover event to li#url_1 &amp; li#url_2. But it is not working!</p>

<p>Can you please suggest the right (and more efficient) way to do this?</p>

<p>Cheers,
Kartik Rao</p>
