如果内部 div 不包含文本，则隐藏一组 div

Question

我试图隐藏一组 div（有边框）并动态填充。每个带边框的 div 还包含用于标题、描述和链接的内部 div。我想隐藏外部 div，这样只有当它被填充时，它才会变得可见。我的 jquery 函数的目标是包含在带边框的 div 内的标题类（l2-section-heading） > 因此，如果此类没有文本，则应该隐藏包含它的主 div。

我已将 html 代码精简为此处所需的内容

$(document).ready(function() {
  $area = $(".l2-webpart"); //this class is for all the outer divs with border 
  $(".l2-section-heading").filter(function() { //targeting the title div
    return $(this).text().trim() == ""
  }) $area.hide()
});

.l2-webpart {
  Background-color: #ffffff;
  color: #000000;
  margin: 1em 1em 0.5em 1em;
  font-family: "Century Gothic";
  padding: 10px;
  box-shadow: 0 0 1px 1px #dddddd;
}

.l2-section-heading {
  font-size: 1.6em;
  color: #022447;
  padding-left: 0.5em;
  text-decoration: underline;
  text-decoration-color: #fe5000;
  margin-bottom: -0.5em;
}

.l2-description {
  font-family: "Century Gothic";
  color: #000000;
  padding: 1em;
}

.l2-links-position {
  list-style-type: none;
  margin-top: -1.9em;
  padding: 1em;
}

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

<!--1st div-->
<div class="row l2-webpart">
  <div class="l2-section-heading">
    Welcome To My Place
  </div>
  <div class="l2-description">
    <p>&#8203;It’s great to have you on board. I am here to help and get you off to a flying start so I have brought together some essential resources to help you. Read on and check out all the links in the pages to find out more, and what it means to be
      part of this big family.&#8203;</p>
  </div>
  <div class="l2-links-position">
    <div class="link-item"><a href="#" title="">My policies</a></div>
  </div>
</div>

<!--2nd div-->
<div class="row l2-webpart">
  <div class="l2-section-heading">

  </div>
  <div class="l2-description">
    <p>&#8203;&#8203;</p>
  </div>
  <div class="l2-links-position">
    <div class="link-item">
      <a href="#" title=""> </a>
    </div>
  </div>
</div>

<!--3rd div-->
<div class="row l2-webpart">
  <!--etc--->
</div>

Answer 1

您可以在过滤结果上使用closest：

$(".l2-section-heading").filter(function() { //targeting the title div
  return $(this).text().trim() === "";
}).closest('.l2-webpart').hide();

.l2-webpart {
  Background-color: #ffffff;
  color: #000000;
  margin: 1em 1em 0.5em 1em;
  font-family: "Century Gothic";
  padding: 10px;
  box-shadow: 0 0 1px 1px #dddddd;
}

.l2-section-heading {
  font-size: 1.6em;
  color: #022447;
  padding-left: 0.5em;
  text-decoration: underline;
  text-decoration-color: #fe5000;
  margin-bottom: -0.5em;
}

.l2-description {
  font-family: "Century Gothic";
  color: #000000;
  padding: 1em;
}

.l2-links-position {
  list-style-type: none;
  margin-top: -1.9em;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--1st div-->
<div class="row l2-webpart">
  <div class="l2-section-heading">
    Welcome To My Place
  </div>
  <div class="l2-description">
    <p>&#8203;It’s great to have you on board. I am here to help and get you off to a flying start so I have brought together some essential resources to help you. Read on and check out all the links in the pages to find out more, and what it means to be
      part of this big family.&#8203;</p>
  </div>
  <div class="l2-links-position">
    <div class="link-item"><a href="#" title="">My policies</a></div>
  </div>
</div>

<!--2nd div-->
<div class="row l2-webpart">
  <div class="l2-section-heading">

  </div>
  <div class="l2-description">
    <p>&#8203;&#8203;</p>
  </div>
  <div class="l2-links-position">
    <div class="link-item">
      <a href="#" title=""> </a>
    </div>
  </div>
</div>