Question

如果部分中的所有 div 都隐藏，则隐藏该部分

2018-09-24

97

javascript jquery

我正在 section 中显示 div。有多个部分，每个部分中有多个子 div。我动态检查下拉字段，如果子 div 与下拉列表中的选择不匹配，则隐藏它们。这很有效。

但是，如果部分中的所有 div 都隐藏了，我现在想隐藏整个部分。这是我的代码：

JS

if ($("section .listings").length === $("section .listing.h_group").length){
    $('section').hide();
}

HTML

<!-- this section should hide -->
<section class="groups" style="clear:both;">
    <h2 class="group-name">Business Liner</h2>
    <div class="listings h_group></div>
    <div class="listings h_group></div>
    <div class="listings h_group></div>
    <div class="listings h_group></div>
</section>

<!-- This section should show -->
<section class="groups" style="clear:both;">
    <h2 class="group-name">Business Liner</h2>
    <div class="listings h_group></div>
    <div class="listings></div>
    <div class="listings h_group></div>
    <div class="listings></div>
</section>

CSS

.h_group {
    display:none;
}

代码当前在控制台中返回错误：

Uncaught TypeError: Cannot read property 'length' of null

似乎找不到该部分，但我不知道为什么。我还认为，如果这确实有效，它会隐藏每个部分，但我只希望它隐藏所有 div 都隐藏的部分。

Answer 1

这里有几个问题。首先，HTML 中的 class 属性缺少结束引号，因此无法正确识别。您需要添加这些引号。其次，类是 .listings ，而不是 .listing

最后，您需要单独检查每个 section 元素，而不是同时检查所有元素。因此，您需要循环遍历它们。然后使用 find() 确定是否有任何 :visible 子 .listing 元素，并根据结果使用 toggle() 部分。试试这个：

$('section').each(function() {
  $(this).toggle($(this).find('.listings:visible').length != 0);
});

.h_group {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- this section should hide -->
<section class="groups" style="clear:both;">
  <h2 class="group-name">Business Liner #1</h2>
  <div class="listings h_group"></div>
  <div class="listings h_group"></div>
  <div class="listings h_group"></div>
  <div class="listings h_group"></div>
</section>

<!-- This section should show -->
<section class="groups" style="clear:both;">
  <h2 class="group-name">Business Liner #2</h2>
  <div class="listings h_group"></div>
  <div class="listings"></div>
  <div class="listings h_group"></div>
  <div class="listings"></div>
</section>

Answer 2

我发现您的 html 有语法错误，即类属性没有结束引号。请尝试为所有类属性添加结束引号，希望它能正常工作。对于上面提供的 HTML，我已添加结束引号。见下文：

<section class="groups" style="clear:both;">
    <h2 class="group-name">Business Liner</h2>
    <div class="listings h_group"></div>
    <div class="listings h_group"></div>
    <div class="listings h_group"></div>
    <div class="listings h_group"></div>
</section>

<!-- This section should show -->
<section class="groups" style="clear:both;">
    <h2 class="group-name">Business Liner</h2>
    <div class="listings h_group"></div>
    <div class="listings"></div>
    <div class="listings h_group"></div>
    <div class="listings"></div>
</section>