jquery seleziona ennesimi figli di un ennesimo bimbo

Question

Ho un tavolo e voglio farlo quando al passaggio del mouse su una cella si trova quella cella e quella simmetrica, ovvero se metto il mouse nella cella (3,1) evidenzia quella cella e il (1,3) .I've questo codice:

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

in questo modo posso selezionare la riga corretta ma ho bisogno di selezionare solo la cella corretta in quella riga, che è la cellula simetric. Ho provato con alcuni selettori ma non riesco a navigare verso quella cella.

Ecco an example

Answer 1

Puoi ork con 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 2

Prova questa:

quando si passa sopra il (x, y) delle cellule del (y, x) delle cellule ottiene la classe 'hover' anche

Controllare la 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 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/

Answer 4

$('td').on('mouseover mouseout', function(){ 
       $(this).toggleClass('hover'); 
       $index = $(this).index()+1; 
       $index2 = $(this).parent().index()+1; 
       $index != $index2?$('tr:nth-child('+$index+') > td:nth-child('+$index2+')').toggleClass('hover'):''; 
      }); 

jsfiddle: https://jsfiddle.net/aEwE4/106/