如果子元素中不存在任何元素，則隱藏父元素

請參閱以下標記：

<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如果div id有孩子
• 如果子div為空，jQuery隱藏父div
• 如果 div 沒有班級的孩子，css 隱藏 div

使用下面我當前的方法，該else陳述句被執行，不確定為什么？

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

uj5u.com熱心網友回復：

您可以使用html()來獲取所需的資訊，然后檢查它是否等于空字串：

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

這應該夠了吧！

uj5u.com熱心網友回復：

與你的假設相反

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

uj5u.com熱心網友回復：

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

標籤：

上一篇：懸停在筆劃的特定短劃線上

下一篇：如何將在父組件中定義并在子組件中使用按鈕訪問的變數值更改10？