17

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.

1
  • Can someone edit the question title? I was searching for "all div's with same class," and almost passed this one up. Upvoting question.
    – Jason
    Sep 21, 2017 at 17:10

4 Answers 4

39

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( );
1
  • You can also change if ( $("div.test:visible").length === 0) line to the if (!$("div.test:visible").length). Jan 12, 2018 at 15:16
8

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.

5
  • Note that this would also hide the wrapper div if there were no divs with a matching class. Not sure if that's desired behavior or not.
    – tvanfosson
    Aug 3, 2009 at 15:21
  • @tvanfosson: Technically if there are no div.test in the markup, it is the same as having no div.test visible. I'm pretty sure that desired behavior. Aug 3, 2009 at 15:22
  • If you only wanted the behavior when there were divs but they were all hidden, you could check to make sure the :hidden count is the same as the :visible count.
    – tvanfosson
    Aug 3, 2009 at 15:23
  • @Andrew -- I'm not sure. There's a semantic difference between "there are no results" and "all of the results are hidden". I'm not saying your answer is wrong, just pointing out that behavior applies in more than just the all are hidden case.
    – tvanfosson
    Aug 3, 2009 at 15:25
  • @tvanfosson: Maybe, anyway, comparing the :hidden length to the :visible length won't work as both will return 0 if there are no elements. Aug 3, 2009 at 15:29
0

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
1
  • You need to qualify this with the appropriate class test. According to the OP the wrapper should be hidden if the "testN" classed DIVs are hidden even if the "header" DIV isn't.
    – tvanfosson
    Aug 3, 2009 at 15:28
0
jQuery("#wrap1").find("div").each(function()
   {
      if ($(this).is(':hidden'))
      {
      }
   }
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.