Question

我有以下标记，在我的页面上重复了14次。每个部分都略有不同，但包含一个内部/外部标签，其中有一个class =＆＃34; sectionLabel＆＃34;。如果紧跟在section标签下的div为空，我需要隐藏section标签。以下是我尝试过的不起作用...它隐藏了所有部分标签。如何只隐藏相应div没有任何子节点的节标签？

<div class="column1">
    <span id="internalOutputsLabel1" class="sectionLabel">Internal Outputs</span>
    <div id="internalOutputStrategicPlanningPhase1" class="linkHolder"> <!-- If empty, hide the label above -->
    </div>

    <span id="externalOutputsLabel1" class="sectionLabel">Extenal Outputs</span>
    <div id="externalOutputStrategicPlanningPhase1" class="linkHolder"> <!-- If empty, hide the label above -->
    </div>
</div>

我尝试过的事情：

$(".linkHolder").each(function (i) {
    if ($(this).empty)
    {
        $(".sectionLabel").hide();
    }
});

Answer 1

你可以像这样过滤它

$('.sectionLabel').filter(function() {
    return $(this).next('.linkHolder').is(':empty')
}).hide();

请注意，jQuery的$(element).empty()会执行其他操作，它会清空元素，删除所有内容。

Answer 2

你几乎成功了：

$(".linkHolder").each(function (i) {
    if ($(this).html() == '')
    {
        $(this).prev().hide();
    }
});

Answer 3

你可以试试这个：

$(document).ready(function() { $('div:empty').remove(); });

隐藏空元素的标签

3 个答案: