javascript - 隐藏空元素的标签

Question

我有以下标记，它在我的页面上重复了 14 次。每个部分都略有不同，但包含一个内部/外部标签，其中有一个 class="sectionLabel"。如果紧邻节标签下方的 div 为空，我需要隐藏节标签。以下是我尝试过的不起作用...它隐藏了所有部分标签。如何仅隐藏相应 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() 还执行其他操作，它清空元素，删除其所有内容。