name - jquery seleccione ntos hijos de una enésima infancia

jquery selector name

Question

Tengo una mesa y quiero hacer que cuando cierro una celda, haga resaltar esa celda y la simetrica, también si pongo el mouse en la celda (3,1) resalta esa celda y el (1,3) .I este es el código

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

De esta manera puedo seleccionar la fila correcta, pero necesito seleccionar solo la celda correcta en esa fila, esa es la celda simétrica. Lo he intentado con algunos selectores pero no puedo navegar a esa celda.

Aquí hay un ejemplo

Answer 1

Prueba esto:

Cuando pasas el cursor sobre la celda (x, y), la celda (y, x) también obtiene la clase ''hover''

Verifica 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 2

Puede 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 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/