jquery选择第n个孩子的第n个孩子

Question

我有一张桌子,我希望当我悬停一个单元格时它突出显示那个单元格和simetric单元格,如果我将鼠标放在单元格(3,1)中它突出显示该单元格和(1,3).I这段代码:

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

这样我可以选择正确的行但我只需要选择该行中的正确单元格,即simetric单元格.我尝试过一些选择器,但我无法导航到那个单元格.

这是一个例子

Answer 1

您可以使用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');
    }
});

演示小提琴