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

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

Ответ 1

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

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

Ответ 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.

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

Ответ 3

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

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

Ответ 4

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