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'); 
} 
}); 

これにより、第2のコードです：

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を繰り返し実行し、その中の正規品と販売ペアを見つけて、他の価格帯とは無関係に更新する必要があります。何か行：

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

あなたは$で空SALE_PRICE項目を選択するために、jQueryのを使用することができます（ '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>