title: Get the suffix of a dynamically selected id within a hover method
body: <p>I have the following JQuery selector with a hover method attached to it:</p>
  
  <pre><code>$("a[id^='foo']").hover(
    function () {
      $(this).css("color", "#eeeeee");
  
    }, 
    function () {
      $(this).css("color", "#ffffff");
    }
  );
  </code></pre>
  
  <p>However, I want to alter a td decoration underneath the links with the 'foo' prefixes on their id's, which have a 'bar' prefix. For clarification: foo1, foo2, foo3 and bar1, bar2, bar3. How can I figure out what id is currently in effect and use its corresponding suffix within the same hover method? </p>
  
  <p>Technically in semi-pseudo code I want to achieve this result</p>
  
  <pre><code>$("a[id^='foo']").hover(
    function () {
      $(this).css("color", "#eeeeee");
          // var x = charAt($(this).id.length-1)
          // $("#bar"+x).css("color", "#eeeeee");
    }, 
    function () {
      // ...
    }
  );
  </code></pre>
  
  <p>I tried variations with $this.id, but I get undefined values.</p>
  
  <p>Thanks for the help!</p>