Question

如何在下面的示例中使用ID数组检查和隐藏#volume2？

<tr id="mytr">

 <th id="volume1">1</th>
 <th id="volume2">2</th>
 <th id="volume3">3</th>

</tr>

<tr>

 <th class="volume1">1</th>
 <th class="volume2"></th> <-- this is empty
 <th class="volume3">3</th>

</tr>

var IDs = [];
$("tr#mytr").find("th").each(function(){ IDs.push(this.id); });

我不想做所有这些if语句

if( $('.volume1').length < 1 ) {
$('#volume1').addClass('hide');
}

if( $('.volume2').length < 1 ) {
$('#volume2').addClass('hide');
}

if( $('.volume3').length < 1 ) {
$('#volume3').addClass('hide');
}

Answer 1

您可以计算该类存在多少非空元素。如果只有该类的emepty元素（没有非空元素），请添加“hide”类：

$('#mytr').find('th[id]').addClass(function() {
    return $('.' + this.id + ':not(:empty)').length === 0 ? 'hide' : '';
});

http://api.jquery.com/empty-selector/

作为替代方案，您可以明确地测试单元格是否包含内容：

return $('.' + this.id).filter(function() { 
    return $.trim($(this).text()) !==  '';
}).length === 0;

这也会将只有空白字符的单元格视为空。

Answer 2

尝试这样的事情

$("tr").find("th").each(function(){
    if( $('.' + this.id).length < 1 ) {
        $(this).addClass('hide');
    }
});

Answer 3

尝试

jQuery(function () {
    $('table tr:nth-child(2) th').each(function () {
        if (!$.trim($(this).text())) {
            $('#' + this.className).hide();
            $(this).hide()
        }
    })
})

演示：Fiddle

使用jquery查找和隐藏元素

3 个答案: