Question

我试图隐藏一组div（有边框）并动态填充。这些带边框的div中的每一个都包含标题，描述和链接的内部div。我想隐藏外部div，这样只有当它填充它才会成为visibe。我的目标是我的jquery函数在标题类（l2-section-heading）中包含div的边框＆gt;所以如果这个类没有文本，那么应该隐藏包含它的主div。

我已将html代码删除到此处所需的内容

＆＃13;

$(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()
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以对过滤结果使用closest：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

[
   ["birthdate", "birthmonth", "contact_id", "company_id", "contact_type_id", "type_name", "vendor_type_id", "is_active", "first_name", "last_name", "email_address", "phone_number", "mobile_number", "fax_number", "address", "state_id", "state_name", "zip_code", "labels", "profile_logo", "website_url", "employees", "parent_id"],
   ["3", "2", "244", "3", "1", "Customers", null, "1", "sorthia", "daksh choratiya", "hellodaksh@gmail.com", "8787877887", "7878787887", "7.87879E+11", "sdfkjhfkd", null, null, "45454", ",undefined,", "https://s3.us-west-2.amazonaws.com/home-inspection%2FContactsCSV-EXCEL-Files/1519826594241_download.png"],
   [null, null, "515", "3", "1", "Customers", null, "1", "prashant", "gadhiya bhai", "pg@gmail.com", "1231321321", "1321321313", "1321321231", "13213213", "1", "Alabama", "12345", ",undefined,"],
   ["11", "11", "529", "3", "1", "Customers", null, "1", "Hardik bhai bhai", "Patel bhai", "hardik121@gmail.com", "98765432100", "65498732100", "9.87978E+11", "Addrreess surat", "6", "Colorado", "987640", ",undefined,"]
]

＆＃13;

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

1 个答案: