如果内容丢失，如何隐藏DIV

Question

我有一些DIV，其内容由Ektron CMS自动生成。

来源截图：

输出：

如果DIV类{letter}Serv至少出现一次，则每个父DIV（justPad）都为空。因此，根据屏幕截图，A和C有内容，但B和D没有。

如果内部没有内容，我如何隐藏{letter}Serv DIV？

我可以申请以下课程：

.hideDiv {
     display: none;
}

示例代码：

<div id="nServ" class="serviceHolder hidOverflow percPadBottom letterCode">
    <h2 class="defaultBlue percPadBottom">N</h2>
        <span id="ctl00_BodyPlaceHolder_Collection15">
        <a href="#ViewEditorsMenu" data-ektron-editorsmenu-id="EktronEditorsMenu3c275505-4a2c-4384-bf36-081bc3e69279" onclick="return false;" class="EktronEditorsMenuMarker"><img src="/WorkArea/images/application/pin_grey.gif" alt="Editor's Menu" title="Editor's Menu" /></a>
        <ul id="EktronEditorsMenu3c275505-4a2c-4384-bf36-081bc3e69279" class="EktronEditorsMenu" style="display:none;">
            {CONTENTS}
        </ul>
        <div class="justPad"><a class="defaultLinks" href="link">Nephrology</a></div>
        <div class="justPad"><a class="defaultLinks" href="link">Neurology</a></div>
        <div class="justPad"><a class="defaultLinks" href="link">Nutrition</a></div>
    </span>
</div>

<div id="bServ" class="serviceHolder hidOverflow percPadBottom letterCode">
    <h2 class="defaultBlue percPadBottom">B</h2>
        <span id="ctl00_BodyPlaceHolder_Collection15">
        <a href="#ViewEditorsMenu" data-ektron-editorsmenu-id="EktronEditorsMenu3c275505-4a2c-4384-bf36-081bc3e69279" onclick="return false;" class="EktronEditorsMenuMarker"><img src="/WorkArea/images/application/pin_grey.gif" alt="Editor's Menu" title="Editor's Menu" /></a>
        <ul id="EktronEditorsMenu3c275505-4a2c-4384-bf36-081bc3e69279" class="EktronEditorsMenu" style="display:none;">
            {CONTENTS}
        </ul>
    </span>
</div>

Answer 1

这应该找到所有空的Div并隐藏它们。

$('div.serviceHolder:not(:has(div.justPad))').hide()

Answer 2

循环遍历每个div并查找子项长度，如果为null .hide（）div：

$('.hidOverflow').each(function() {
    var $this = $(this),
        $items = $this.children('.justPad'),
        itemAmount = $items.length;

    if(itemAmount <= 0) {
        $this.hide();
        // or if you want to use your CSS-class
        $this.addClass('hideDiv');
    }
});

编辑：添加我们使用CSS类而不是.hide（）函数的版本。

Answer 3

尝试以下

$(document).ready(function(){
$("div[id$=Serv]").each(function(){
        if($(this).is(':empty')){
            $(this).hide();
        }
        else{
            $(this).show();
        }
});
});

希望它有所帮助......