如果子元素中不存在任何元素，则隐藏父元素

Question

查看以下标记：

<div class="careersIntegration__listing" id="careers-listing">
  
  <div class="careersIntegration__accordion">
    <div class="careersIntegration__accordion-header">
      <span class="careersIntegration__accordion-dept">Sales</span>
    </div>
    <div class="careersIntegration__accordion-jobs" data-dept="sales"></div>
  </div>
  
  <div class="careersIntegration__accordion">
    <div class="careersIntegration__accordion-header">
      <span class="careersIntegration__accordion-dept">Customer Success</span>
    </div>
    <div class="careersIntegration__accordion-jobs" data-dept="customer-success">
      <figure class="careerCard" data-dept="customer-success">Job</figure>
    </div>
  </div>
  
</div>

我试图隐藏 .careersIntegration__accordion 的 .careersIntegration__accordion-jobs 没有子元素的元素。

为简化起见，如果.careersIntegration__accordion-jobs 没有子元素，则隐藏父元素.careersIntegration__accordion。

我在现有的 SO 帖子中看到了示例（请参阅此帖子），但无法在我的实例中使用该方法。请参阅下面我尝试过的帖子：

• jquery if div id has children
• jQuery hide parent div if child div is empty
• css hide div if div has no child with class

使用下面我当前的方法，else 语句被执行，不确定为什么？

$(".careersIntegration__accordion").each(function(){
  if( $(this).children(".careersIntegration__accordion-jobs").length == 0 ){
    $(this).parent().hide();
  } else{
    console.log('has children');
  }
});

Answer 1

与你的假设相反

$(this).children(".careersIntegration__accordion-jobs")

不返回使用 CSS 类 careersIntegration__accordion-jobs 的元素的子元素。事实上，它只返回使用这个 CSS 类的实际元素。如果你想拥有它的孩子，你需要将另一个电话附加到.children()。

例如：

$(".careersIntegration__accordion").each(function() {
  if ($(this).children(".careersIntegration__accordion-jobs").children().length == 0) {
    $(this).hide();
  } else {
    console.log('has children');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="careersIntegration__listing">

  <!-- this should be hidden -->
  <div class="careersIntegration__accordion">
    <div class="careersIntegration__accordion-header">
      <span class="careersIntegration__accordion-dept">Sales</span>
    </div>
    <div class="careersIntegration__accordion-jobs"></div>
  </div>


  <!-- this should not be hidden -->
  <div class="careersIntegration__accordion">
    <div class="careersIntegration__accordion-header">
      <span class="careersIntegration__accordion-dept">Tech</span>
    </div>
    <div class="careersIntegration__accordion-jobs">
      <div>item</div>
    </div>
  </div>


</div>

Answer 2

您可以使用html() 获取您需要的信息，然后检查它是否等于空字符串：

$(this).children(".careersIntegration__accordion-jobs").html() === ''

这应该可以解决问题！

Answer 3

因为 $(this).children(".careersIntegration__accordion-jobs").length 只计算类 careersIntegration__accordion-jobs 的元素 - 但您想检查这些元素的子元素。

以下代码有效：

$(document).ready(function(){
  $(".careersIntegration__accordion .careersIntegration__accordion-jobs").each(function(){
  console.log("children().length="+$(this).children().length);
    if( $(this).children().length == 0 ){
      $(this).hide();
      console.log('no children');
    } else{
      console.log('has children');
    }
  });
});

在这里查看：https://jsfiddle.net/czs0uya5/