highlight specific divs (tds) onhover of a link

Question

So i'm just starting to discover how awesome jquery is and how a basic function can drive me nuts to understand. I'm trying to highlight a div with a specific "id" generated via backend

    <br/><br/><br/><br/>
<div id="id_1">
    <h2>id_1 - 
        <a class="marker_id_1" href="#top" name="id_1" id="id_1">Top</a>
    </h2>
</div>
<div id="id_1">
    <h2>id_1 - 
        <a class="marker_id_1" href="#top" name="id_1" id="id_1">Bottom</a>
    </h2>
</div>
<div id="id_2">
    <h2>id_2 - 
        <a class="marker_id_2" href="#top" name="id_2" id="id_2">Top</a>
    </h2>
</div>
<div id="id_2">
    <h2>id_2 - 
        <a class="marker_id_2" href="#top" name="id_2" id="id_2">Bottom</a>
    </h2>
</div>​

So if I hover over the "id_1" Top , I want to highlight both the "id_1" Top and Bottom. Below is a link to that so it'll be easier to understand.

http://jsfiddle.net/4PgC6/66/

Thanks!!

Answer 1

You must not use same id for different element.

Using name you can do

$('a').hover(function() {
  var name = this.name;
  $('a[name='+ name +']').css('color', '#f00')
},function() {
  var name = this.name;
  $('a[name='+ name +']').css('color', 'blue')
});

DEMO

Using class

$('a').hover(function() {
  var className = this.className;
  $('a.' + className).css('color', '#f00')
},function() {
  var className = this.className;
  $('a.' + className).css('color', 'blue')
});

DEMO

if you want to use .on() for hover then use

$('a').on('hover', function(e) {
    if (e.type == 'mouseenter') {
        var divName = this.name;
        console.log(divName);
        $('div', 'td.' + divName).addClass('match-highlight');
    } else {
        var divName = this.name;
        $('div', 'td.' + divName).removeClass('match-highlight');
    }
});

DEMO