jQuery:如果父div包含空子span，则将类添加到父div

Question

如果类“. it空”包含空span，则尝试将其添加到我的.is.附加-属性中。在本例中，第一个span为空，第二个span包含值。如果其中一个跨度为空，则应隐藏整个元素。

HTML:

<div class="widget widget-grid widget-two-col row desc-ean additional-property">
  <div class="widget-inner col-xl-6 widget-prop-xl-3-1 col-lg-6 widget-prop-lg-3-1 col-md-6 widget-prop-md-3-1 col-sm-12 widget-prop-sm-3-1 widget-stacked-mobile col-12 widget-prop-3-1 widget-stacked-mobile">
    <div>
      <div class="widget widget-text widget-none test">
        <div class="widget-inner bg-appearance">
          <p><span></span> <br></p>
        </div>
      </div>
    </div>
  </div>
  <div class="widget-inner col-xl-6 widget-prop-xl-3-1 col-lg-6 widget-prop-lg-3-1 col-md-6 widget-prop-md-3-1 col-sm-12 widget-prop-sm-3-1 col-12 widget-prop-3-1">
    <div>
      <div class="widget widget-text widget-none desc-ean__code">
        <div class="widget-inner bg-appearance">
          <p><span>408</span> mm<br></p>
        </div>
      </div>
    </div>
  </div>
</div>

我想使用jQuery，但我现在完全在挣扎。

任何帮助都很感激！

Answer 1

$(".additional-property span").each(function(){ 
    if($(this).html().trim()==""){
        $(this).closest(".additional-property").addClass("is-empty");
    }
});

这个JQuery代码循环遍历div内部的所有范围，并使用类.递增-属性，检查span是否为空，如果是，它将类. is -空添加到相应的父div中。

Answer 2

使用Jquery function.

• Check
• 首先检查.additional-property下的每个跨是否为空。
• 使用parent()向最近的div添加is-empty类。H 211F 212

​

$(".additional-property span").each(function(){ 
    if($(this).html().trim()==""){
        $(this).parent().addClass("is-empty");
    }
});

.is-empty{color:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="widget widget-grid widget-two-col row desc-ean additional-property">
  <div class="widget-inner col-xl-6 widget-prop-xl-3-1 col-lg-6 widget-prop-lg-3-1 col-md-6 widget-prop-md-3-1 col-sm-12 widget-prop-sm-3-1 widget-stacked-mobile col-12 widget-prop-3-1 widget-stacked-mobile">
    <div>
      <div class="widget widget-text widget-none test">
        <div class="widget-inner bg-appearance">
          <p><span></span> <br></p>
        </div>
      </div>
    </div>
  </div>
  <div class="widget-inner col-xl-6 widget-prop-xl-3-1 col-lg-6 widget-prop-lg-3-1 col-md-6 widget-prop-md-3-1 col-sm-12 widget-prop-sm-3-1 col-12 widget-prop-3-1">
    <div>
      <div class="widget widget-text widget-none desc-ean__code">
        <div class="widget-inner bg-appearance">
          <p><span>408</span> mm<br></p>
        </div>
      </div>
    </div>
  </div>
</div>

​