JQUERY 选择具有特定样式的 tr 内的所有 td 单元格

Question

如何更改具有特定样式的 tr 中的 td 单元格的颜色？

例如:

<tr style="display: table-row">
<td></td>
<td></td>
</tr>

到目前为止我已经这样做了，但它并不完全有效:

if ($('.mydiv').css('display') == 'table-row') {
   $(this).siblings('td').css("background-color", "white");
}

Answer 1

我的第一个想法是:

$('td').filter(function(){
    return this.parentNode.style.display == 'table-row';
}).css('background-color','#fff');

正如所写，这将选择所有 td 元素，然后将其过滤为父元素 tr 具有 style="display: table-row;";不过，这确实需要 tr 具有内联样式集。然而，再使用一点 jQuery，您可以通过以下方式实现相同的效果:

$('td').filter(function(){
    return $(this).parent().css('display') == 'table-row';
}).css('background-color','#fff');

这将以相同的方式过滤，但包括在外部样式表中设置的 CSS(或在文档的 head 中的 style 标签中)。

但是，我会减少 DOM 遍历并明确地只处理 tr 元素，并使用给定的类名来实现相同的目的:

$('tr').filter(function(){
    return $(this).css('display') == 'table-row';
}).addClass('hasDisplayTableRow');

当然，这允许使用 CSS:

tr.hasDisplayTableRow td {
    /* css */
}