Use jQuery to check if all div's are hidden

Question

How would I check if all the div's with class test are hidden. And if they are all hidden set wrap1 to hidden. Thanks.

<div id='wrap1'>
<div class="header">Header 1</div>
<div class='test'><a href="#">Test 1</a></div>
<div class='test'><a href="#">Test 2</a></div>
<div class='test'><a href="#">Test 3</a></div>
</div>

UPDATE: Thanks everyone for the really quick answers, I got it working. They were all very helpful.

Answer 1

Better way to see if they are all visible is the count for visibility the same as the total count.

$("#wrap1 div:visible").length == $("#wrap1 div").length

Answer 2

You can do the check as by using selector as suggested above and to it like this:

 if ( $("div.test:visible").length === 0)
      $("#wrap1").hide( );

Answer 3

This snippet will loop all <div id="wrap#"> and hide them if the test are hidden.

$("div[id^='wrap']").each(function() {
  var wrap = $(this);

  if(wrap.children("div[class^='test']:visible").length == 0) {
    wrap.hide();
  } else {
    wrap.show();
  }
});

If you still want to keep your <div id="wrap#"> visible if there are no test at all (as in none in the markup), you can use the following modified snippet:

$("div[id^='wrap']").each(function() {
  var wrap = $(this);

  if(wrap.children("div[class^='test']").length > 0 && 
     wrap.children("div[class^='test']:visible").length == 0) {
    wrap.hide();
  } else {
    wrap.show();
  }
});

There is no compelling reason to number classes (other than in edge cases). Your numbering complicates the above code as well as your CSS. It would be easier just to remove the numbering from test. (You don't need it as you can always select a subset of them using :lt(index), :gt(index), :eq(index), :first and :last.

As for numbering ids, that's fine since each id must be unique.

Answer 4

jQuery("#wrap1").find("div").each(function()
   {
      if ($(this).is(':hidden'))
      {
      }
   }
);