Question

我有一张这样的表：

<table Id="modules-mgr">
<tbody>
<tr>
<td>lorem ispium blok</td>
<td>lorem ispium blok</td>
<td>lorem ispium blok</td>
</tr>
<tr>
<td>lorem ispium blok</td>
<td>lorem ispium blok</td>
<td>lorem ispium blok</td>
</tr>
<tr>
<td>lorem ispium blok</td>
<td>lorem ispium blok</td>
<td>lorem ispium blok</td>
</tr>
</tbody>
</table>

我想隐藏每个td的最后tr。 td和tr没有任何类，因此我们需要使用.eq选择它们。并且还需要一个else if函数，比如resize event。如果windows调整为200，则隐藏最后td，如果窗口调整为100，则隐藏最后两个td。这里到目前为止我做了什么，但是工作得很好;

jQuery(window).resize(function() {
var width=jQuery(window).width();
    if(width < 870) {
        jQuery('table#modules-mgr tr td').eq(10).hide()

    }
    /*elseif(width < 570) {

    }
    else {

    }*/
});

Answer 1

仅限CSS：

@media all and (max-width: 200px) {
    #modules-mgr td:last-child {display:none]
}
@media all and (max-width: 100px) {
    #modules-mgr td:nth-last-child(-n+2) {display:none]
}

Answer 2

如果你真的想要标题中所说的nth-child，

jQuery('#modules-mgr td:nth-child(10)').hide();

对于那些没有陷入黑暗时代的浏览器，

应该像直接css一样：

#modules-mgr td:nth-child(10) {
    display: none;
}

（如果您只想要最后一个元素，请参阅其他答案）

Answer 3

如果您想隐藏最后一个，可以使用last()选择器：

// for last
$('#modules-mgr tr td').last().hide();
// for n-th element - 0-index based
$('#modules-mgr tr td').eq(n - 1).hide();

替代：

// for last
$('#modules-mgr tr td:last').hide();
// for n-th element - 0-index based
$('#modules-mgr tr td:eq(n - 1)').hide();

Answer 4

jQuery('table#modules-mgr tr td').last().hide();

使用Jquery隐藏每个tr的第n个元素

4 个答案: