How to hide a DIV if content are missing

问题

I have some DIV which has contents that are auto generated by Ektron CMS.

Screenshot of the source:

Output:

Each parent DIV ({letter}Serv) is empty if the DIV class justPad doesn't appear at least once. So based on the screenshots, A and C has content but B and D doesn't.

How can I hide the {letter}Serv DIV if there is no content inside it?

I have the following class that I can apply:

.hideDiv {
     display: none;
}

Sample code:

<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>

回答1:

This should find all of your empty Divs and hide them.

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

回答2:

Loop through each div and looks for children length, if null .hide() the 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');
    }
});

edit: Added version where we are using your CSS-class instead of the .hide()-function.

回答3:

try the following

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

Hope it helps ....

来源：https://stackoverflow.com/questions/26845161/how-to-hide-a-div-if-content-are-missing

标签

javascript

jquery

html

css

ektron