jquery select nth children of a nth children

Question

I have a table and I want to make that when I hover a cell it higlights that cell and the simetric one, aka if I put the mouse in cell (3,1) it highlights that cell and the (1,3).I've this code:

$('td').on('mouseover mouseout', function(){
             $(this)
             .add($(this).parent().parent()
             .children()[$(this).index()]).toggleClass('hover');
      });

This way I can select the correct row but I need to select only the correct cell in that row, that's the simetric cell. I have tried with some selectors but I can´t navigate to that cell.

Here's an example

Answer 1

Try this:

When you hover over the (x,y) cell the (y,x) cell gets the 'hover' class also

Check the DEMO

$('td').on('mouseover', function(){
    var that = $(this);
    that.addClass('hover');
    var x = that.index();
    var y = that.closest('tr').index();
    $('table').find('tr').eq(x).find('td').eq(y).addClass('hover');
}).on('mouseout', function() {
    $('td').removeClass('hover');
})

Answer 2

You can ork with index(),

$('td').on('mouseover mouseout', function () {
    $(this).toggleClass('hover');
    if ($(this).index() !== $(this).parent().index()) {
        $('tr:eq(' + $(this).index() + ') td:eq(' + $(this).parent().index() + ')').toggleClass('hover');
    }
});

Demo Fiddle

Answer 3

$('td').on('mouseover mouseout', function () {
    var i = this.cellIndex, 
        pi = this.parentNode.rowIndex,
        cell = this.parentNode.parentNode.rows[i].cells[pi];

    $(this).add(cell).toggleClass('hover');
});

https://jsfiddle.net/1u3w7b3q/2/