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>
这应该找到所有空的Divs并将其隐藏。
$('div.serviceHolder:not(:has(div.justPad))').hide()
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.
try the following
$(document).ready(function(){
$("div[id$=Serv]").each(function(){
if($(this).is(':empty')){
$(this).hide();
}
else{
$(this).show();
}
});
});
Hope it helps ....
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.