如果隐藏了部分中的所有div,则隐藏该部分

Question

我在里面显示div section.每个部分有多个部分和多个子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

你在这里遇到了几个问题.首先class,HTML中的属性缺少结束引号,因此无法正确识别.你需要添加这些引号.其次,类是.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>