jquery - Hide div when sub-components "empty" (nothing to display) -


fairly novice when comes jquery, in advance bearing me :)

for divs set widths , heights, i'm looking way hide (set display: none;) these containers when nothing displayed on browser. moreoften not, when have nested html complicates things bit, sub-components need checked emptiness/display:none;.

the closest i've come far using .text() method, trimming whitespace, , checking length. however, .text() ignores styles , grabs hidden text , since doesn't return dom structure difficult filter over.

here's fiddle i've been playing with: http://jsfiddle.net/jbbkq/5/ i'd div "hidden content" in caught first jquery function, since

hidden content surrounded in has it's display set none.

does make sense?

selects div's looking iterate on them , filter child collection based on being visible or not. if no children visible hide element self.

$("div").each(function(){    if(!this.children().find(":visible").length){        this.hide();    } } 

not not work correctly if divs selecting can nested inside each other (a div div being hidden might not hidden self, depending on order of selection)

edit

if wanted go down 1 level use filter instead of find

$("div").each(function(){      if(!this.children().filter(":visible").length){          this.hide();      } } 

Comments

Popular posts from this blog

django - How can I change user group without delete record -

java - Need to add SOAP security token -

java - EclipseLink JPA Object is not a known entity type -