Используйте jQuery, чтобы проверить, все ли div скрыты

Question

Как бы я проверил, скрыты ли все div с тестом класса И если они все скрыты, установите wrap1 на скрытый. Спасибо.

<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: Спасибо всем за действительно быстрые ответы, у меня все получилось. Все они были очень полезны.

Answer 1

Вы можете выполнить проверку, используя селектор, как предложено выше, и вот так:

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

Answer 2

Этот фрагмент зациклит все <div id="wrap#"> и скроет их, если тест скрыт.

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

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

Если вы по-прежнему хотите, чтобы ваш <div id="wrap#"> оставался видимым, если тестов вообще нет (как, например, в разметке), вы можете использовать следующий модифицированный фрагмент:

$("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();
  }
});

Нет веских причин для числовых классов (кроме крайних случаев). Ваша нумерация усложняет приведенный выше код, а также ваш CSS. Было бы проще просто убрать нумерацию с test. (Вам это не нужно, так как вы всегда можете выбрать их подмножество, используя :lt(index), :gt(index), :eq(index), :first и :last.

Что касается нумерации идентификаторов, это нормально, поскольку каждый идентификатор должен быть уникальным.

Answer 3

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

Answer 4

Лучший способ увидеть, все ли они видны, - это счетчик видимости, равный общему количеству.

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