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()伪选择器，但根据我的经验，这样做很脆弱且容易出错，因此我尽量避免这样做。< / p>

相反，请尝试：

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

上述内容还避免了代码自.index()返回基于零的偏移量但nth-child使用基于1的偏移量的代码时出现的“逐个”错误。

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)会根据匹配td s的索引进行选择，这将是您上一行中的第二个，而不是第三个。因此，请使用：

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

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

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

TD在TR中的位置

2 个答案: