Question

我正在section中显示div。有多个部分，每个部分中有多个子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，我添加了结尾引号。见下文：

0  libicucore.A.dylib             0x181b59250 icu::Calendar::adoptTimeZone(icu::TimeZone*) + 24
1  CoreFoundation                 0x181e0ede4 __cficu_ucal_setTimeZone + 64
2  CoreFoundation                 0x181e0ede4 __cficu_ucal_setTimeZone + 64
3  CoreFoundation                 0x181d98dc4 __ResetUDateFormat + 1668
4  CoreFoundation                 0x181d984ec __SetUpCFDateFormatter + 344
5  Foundation                     0x1827915b0 -[NSDateFormatter _regenerateFormatter] + 280
6  Foundation                     0x182791314 -[NSDateFormatter stringForObjectValue:] + 152
7  Foundation                     0x182790efc +[NSDateFormatter localizedStringFromDate:dateStyle:timeStyle:] + 124

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

2 个答案: