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');

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

但是,我会减少DOM遍历并tr仅显式处理元素,并使用给定的类名来实现相同的目的:

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

当然,这允许使用CSS:

tr.hasDisplayTableRow td {
    /* css */
}