使用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>

更新:感谢大家真正快速的答案,我得到了它的工作.他们都非常有帮助.

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.

至于编号ID,这很好,因为每个id必须是唯一的.