Get the suffix of a dynamically selected id within a hover method
<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>
