title: jQuery hover highlight hovered link and corresponding link
body: <p>I have a page that will have at least 60 different links, and at least 10 of them will have a corresponding link that when either one is hovered over, the corresponding one needs to be highlighted. I figured out a way (one-sided so far), but want to make sure if this is the best way, or can it be done more efficiently. I don't know if this would be the case , but I don't want to have a 100+ link page (with 30+ corresponding links) that takes a long time to highlight both links. Each link will have at least 5 class selectors.</p>
  
  <p>Please see the <a href="http://jsfiddle.net/6oq0d2oo/" rel="nofollow">Fiddle</a> that demonstrates it...one sided (hovering over person), but if I hover over the sport, the person needs to highlight also.</p>
  
  <p>Also, I will not know the class to use until runtime. I only know that it will start with "startEnd".</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.block1').hover(
    function() {
      var classes = $(this).attr('class').split(' ');
  
      for (var x = 0; x &lt; classes.length; x++) {
        if (classes[x].substr(0, 8) === "startEnd") {
          selectedClass = classes[x];
          break;
        }
      }
  
      $("." + selectedClass).addClass("border");
    },
    function() {
      $("." + selectedClass).removeClass("border");
    }
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div&gt;
      &lt;div class="startEnd1 block1 green"&gt;Don Mattingly&lt;/div&gt;
      &lt;div class="startEnd2 block1 green"&gt;Michael Jordan&lt;/div&gt;
      &lt;div class="startEnd3 block1 green"&gt;Peyton Manning&lt;/div&gt;
    &lt;/div&gt;
    &lt;hr style="clear: left" /&gt;
    &lt;h2&gt;Sport&lt;/h2&gt;
    &lt;div class="square1 gray startEnd1 p1 p2 p3"&gt;Baseball&lt;/div&gt;
    &lt;div class="square1 gray startEnd2 p1 p2 p3"&gt;Basketball&lt;/div&gt;
    &lt;div class="square1 gray startEnd3 p1 p2 p3"&gt;Football&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>