Testing if elements are hidden

Question

Ok guys so I am testing if elements are hidden, problem is if the parent element is hidden then the children are considered hidden as well so the line that I append is being appending even if the children elements that aren't technically "display:none"

function checkIfVisible() {
  var checkLeft= $('#left').children('.module').filter(':hidden');
  if(checkLeft.length > 0) {
   if(!$('.resetLeft').length) {
      left.prepend('<span class="resetLeft">Reset Left Widgets</span>');
    } 
  }

I run this script on page load, and when ever any of the children elements are clicked to be hidden. How do I stop the script from assigning the prepended element from being added if the parent elements is hidden but none of the children are hidden (Display:none) in style?

So basically.

If #left is hidden (parent) and none of the children are I don't want the resetLeft to be prepended. But if #left is hidden and 1 or more of the children of it are display:none then prepended. even if left isn't hidden I need to this work as well.

Blender · Accepted Answer · 2013-06-16 19:05:26Z

3

This should do it:

var visible = $('#left').is(':hidden') && $('#left').children('.module').filter(function() {
    return this.style.display === 'none';
}).length === 0;

But this seems like a hack. Why are you forced to do this?

answered Jun 16, 2013 at 19:05

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

wuhcwdc Over a year ago

Can you please tell why did you use ===. '==' is also working perfectly.

Blender Over a year ago

@PankajGarg: Why should I use == instead? === is the right equality operator 99% of the time.

wuhcwdc Over a year ago

style.display return string which is == to none

Blender Over a year ago

@PankajGarg: It's best to use strict equality unless you have a reason not to use it.

wuhcwdc Over a year ago

Understood your point. 1==="1" // false, because they are of a different type

|

EasyBB · Accepted Answer · 2013-06-16 23:25:28Z

1

I took what Blender sort of said to do but I changed it around to work just the way I wanted. I used the && and logical operator...

function checkIfVisible() {
 var checkLeft=  
    $('#left').is(':visible')
    &&
    $('#left').children('.module').filter(':hidden').length > 0;
   if(checkLeft) {
       if(!$('.resetLeft').length) {
      left.prepend('<span class="resetLeft">Reset Left Widgets</span>');
     }
   }

This worked wonderfully for me, and all I did was add the function to the click function of showing the #left element!

answered Jun 16, 2013 at 23:25

EasyBB

6,62210 gold badges51 silver badges82 bronze badges

Collectives™ on Stack Overflow

Testing if elements are hidden

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related