TD在TR中的位置

Question

我看到了一个基于匹配内容的TD元素样式

$(".myTable td:contains('red')").each(function() {
    $(this).addClass('myClass');
            var nth = $(this).index();
});

它运行良好。现在我需要在下面的一行中设置TD。所以我想我可以计算这个TD的位置，并申请下一个TR

$(".myTable td:contains('red')").each(function() {
    $(this).addClass('myClass');
    var tdNth= $(this).index();
    $(this).parent().next('tr').find('td:nth-child(tdNth)).addClass('myClass');
});

但是它不起作用。我错过了什么？

Answer 1

您正试图将变量"插值"到字符串常量中。这行不通。

虽然可以使用字符串串联来构建适当的:nth-child()伪选择器，但根据我的经验，这样做很容易出错，所以我尽量避免这样做。

相反，请尝试：

$(this).parent().next('tr').children().eq(tdNth).addClass('myClass');

由于.index()返回基于零的偏移，但nth-child使用基于一的偏移，因此上述操作也避免了代码可能出现的"逐个关闭"错误。

Answer 2

如果表的行使用th作为第一列，那么代码：

var tdNth= $(this).index();

将是td的索引，包括th，所以如果它是第3列，第1列是th，tdNth将是3，这将不适用于：

$(this).parent().next('tr').children('td').eq(tdNth).addClass('myClass');

因为eq(tdNth)将根据匹配的tds的索引进行选择，该索引将是上面行中的第二个，而不是第三个。因此，请使用：

var tdNth = $(this).parent().children('td').index($(this));
$(this).parent().next('tr').children('td').eq(tdNth).addClass('myClass');

这将确保两者的索引都基于td的索引，并避免逐个问题。

http://jsfiddle.net/55krupq2/3/