使用 jQuery 检查所有 div 是否被隐藏答案

【问题标题】：Use jQuery to check if all div's are hidden使用 jQuery 检查所有 div 是否被隐藏
【发布时间】：2010-11-16 09:49:18
【问题描述】：

我将如何检查是否所有带有类测试的 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>

更新：感谢大家的快速回答，我得到了它的工作。他们都非常乐于助人。

【问题讨论】：

有人可以编辑问题标题吗？我正在搜索“所有具有同一类的 div”，并且几乎通过了这个。赞成的问题。

标签： javascript jquery html css dom

【解决方案1】：

您可以使用上面建议的选择器进行检查，如下所示：

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

【讨论】：

您也可以将if ( $("div.test:visible").length === 0) 行更改为if (!$("div.test:visible").length)。

【解决方案2】：

这个 sn-p 将循环所有 <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#"> 可见（如标记中的无），您可以使用以下修改后的 sn-p：

$("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 必须是唯一的。

【讨论】：

请注意，如果没有匹配类的 div，这也会隐藏包装器 div。不确定这是否是所需的行为。
@tvanfosson: 从技术上讲，如果标记中没有div.test，则与没有可见的div.test 相同。我很确定这是理想的行为。
如果您只希望有 div 但它们都被隐藏时的行为，您可以检查以确保 :hidden 计数与 :visible 计数相同。
@Andrew -- 我不确定。 “没有结果”和“所有结果都被隐藏”之间存在语义差异。我并不是说你的答案是错误的，只是指出行为不仅仅适用于所有隐藏的情况。
@tvanfosson: 也许，无论如何，比较 :hidden 长度和 :visible 长度是行不通的，因为如果没有元素，两者都会返回 0。

【解决方案3】：

查看它们是否都可见的更好方法是将可见性计数与总计数相同。

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

【讨论】：

您需要通过适当的班级测试来证明这一点。根据 OP，如果“testN”分类的 DIV 被隐藏，即使“标题”DIV 不是，包装器也应该被隐藏。

【解决方案4】：

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

【讨论】：