隐藏DIV何时为空，然后将类添加到另一个Div

Question

我们有产品价格和销售价格

两个类都有宽度：50％和内联块。

我想编写一个脚本，该脚本在没有销售价格的情况下更改样式的宽度（添加宽度100％并更改字体样式）。

这是我到目前为止尝试的。

这是第一个代码：

jQuery(document).ready(function($) {
 if( $('.eg-top-ponudbe-content-element-28').html().trim().length === 0) {
     $('.eg-top-ponudbe-content-element-28').hide();
     $('.eg-top-ponudbe-content-element-24').addClass('change_regular_price');
 }
});

这是第二个代码：

jQuery(document).ready(function($) {
 if( $('.eg-top-ponudbe-content-element-28').is(':empty')) {
    $('.eg-top-ponudbe-content-element-28').hide();
    $('.eg-top-ponudbe-content-element-24').addClass('change_regular_price');
 }
});

也无效，因为所有产品的销售价格（也有销售价格的产品）

html是：

<div class="price_div">   
 <div class="esg-content eg-post-903 eg-top-ponudbe-content-element-28-a">
   <a class="eg-top-ponudbe-content-element-28 eg-post-903"  href="javascript:void(0);" target="_self">regular_price 1.200 €</a></div>
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-24-a">
  <a class="eg-top-ponudbe-content-element-24 eg-post-903"   href="javascript:void(0);" target="_self">sale_price 1.100 €</a></div>
  </div>
 </div>

Answer 1

您必须遍历每个Price_div，并在其中找到常规和销售对，然后您可以独立于其他价格Divs更新它们。一行：

$(".price_div").each(function(_ix, el) {
  var $priceDiv = $(el):
  var $regularPrice = $priceDiv.find(".eg-top-ponudbe-content-element-28");
  var $salePrice = $priceDiv.find(".eg-top-ponudbe-content-element-24");
  if( $regularPrice.is(':empty')) {
    $regularPrice.hide();
    $salePrice.addClass('change_regular_price');
  }
}) 

Answer 2

您可以使用jquery选择$（'。sale_price：empty'）的空sale_price项目，然后通过添加一个.each（）（）

来循环浏览结果

$('.sale_price:empty').each(function() {
  $(this).hide();
  $(this).parent().find('.regular_price').addClass('change_regular_price');
})

.sale_price {
  width: 50%;
  background: red;
  float: left;
}
.regular_price {
  width: 50%;
  background: blue;
  float: left;
}
.regular_price.change_regular_price {
  width: 100%;
  background: green;
  float: left;
}
ul {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div class='sale_price'>
      $5.00
    </div>
    <div class='regular_price'>
      $7.00
    </div>
  </li>
  <li>
    <div class='sale_price'></div>
    <div class='regular_price'>
      $8.00
    </div>
  </li>
  <li>
    <div class='sale_price'>
      $15.00
    </div>
    <div class='regular_price'>
      $17.00
    </div>
  </li>
</ul>

Answer 3

jQuery(document).ready(function($) {
  $( ".price_div" ).each(function() {
    var regular_price = $(this).find('div:first-child');
    var sale_price = $(this).find('div:last-child');
    if( sale_price.find('a').html().trim().length === 0) {
      sale_price.hide();
      regular_price.addClass('change_regular_price');
    } 
  });
});

.price_div {
          margin-bottom: 20px;
          width: 600px;
          height: 40px;
          border: 1px solid #ccc;
        }
        .price_div div {
          display: inline-block;
          width: 50%;
          height: 40px;
          line-height: 40px;
          float: left;
          text-align: center;
        }
        .change_regular_price {
          width: 100% !important;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="price_div">   
  <div class="esg-content eg-post-903 eg-top-ponudbe-content-element-28-a">
    <a class="eg-top-ponudbe-content-element-28 eg-post-903" href="javascript:void(0);" target="_self">regular_price 1.200 €</a>
  </div>
  <div class="esg-content eg-post-903 eg-top-ponudbe-content-element-24-a">
    <a class="eg-top-ponudbe-content-element-24 eg-post-903" href="javascript:void(0);" target="_self">sale_price 1.100 €</a>
  </div>
</div>
<div class="price_div">   
  <div class="esg-content eg-post-903 eg-top-ponudbe-content-element-28-a">
    <a class="eg-top-ponudbe-content-element-28 eg-post-903" href="javascript:void(0);" target="_self">regular_price 1.200 €</a>
  </div>
  <div class="esg-content eg-post-903 eg-top-ponudbe-content-element-24-a">
    <a class="eg-top-ponudbe-content-element-24 eg-post-903" href="javascript:void(0);" target="_self"></a>
  </div>
</div>