highlighting lines based on array
<p>I have a body of text with several lines.  Each line is wrapped in a span with an incremented value at the end to determine which line is what (for example, line-1, line-2, line-3 and so forth).  </p>

<pre><code>&lt;div id="textbody"&gt;
    &lt;span id="line-1"&gt;what is love&lt;/span&gt;&lt;br/&gt;
    &lt;span id="line-2"&gt;oh baby, don't hurt me&lt;/span&gt;&lt;br/&gt;
    &lt;span id="line-3"&gt;Don't hurt me no more&lt;/span&gt;&lt;br/&gt;
    &lt;span id="line-4"&gt;Oh, baby don't hurt me&lt;/span&gt;&lt;br/&gt;
    &lt;span id="line-5"&gt;Don't hurt me no more&lt;/span&gt;&lt;br/&gt;
    &lt;span id="line-6"&gt;What is love&lt;/span&gt;&lt;br/&gt;
    &lt;span id="line-7"&gt;Yeah&lt;/span&gt;&lt;br/&gt;
&lt;/div&gt;
</code></pre>

<p>Now I have an array that says lines 1 and 2 are grouped together and lines 5-6 are grouped together.  Which means when the mouse hovers over line-1 then turn the background a different color on line-1 and line-2 (as per the array) as well as if line-5 is mouseovered then do the background thing on line-5 and line-6.  </p>

<p>It's simply doing it on a span by span basis, but I'm not sure how to approach the array part of it.  Should I use something like in_array?  I know it's a PHP function, but Google tells me people have built similar functions for JS.  </p>

<pre><code>$("span[id^='line-']").live('mouseover', function(e) {
  e.preventDefault();
  var line_id = $(this).attr('id').substring(6);

  $(this).addClass("highlight1");

  return false;
}); 

$("span[id^='line-']").live('mouseleave', function(e) {
  e.preventDefault();
  var line_id = $(this).attr('id').substring(6);

  $(this).removeClass("highlight1");

  return false;
}); 
</code></pre>
