如果div裏面div有類添加特定樣式到按鈕

Question

如何使用jQuery更改「添加到購物車」按鈕位置？我有結構是這樣的：

.add_to_cart_button { 
 
    background-color: transparent; 
 
    position: absolute; 
 
    top: -9.4%; 
 
    right: -16%; 
 
    border: none; 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    border-left-style: solid; 
 
    border-left-color: rgba(0, 0, 0, 0.1); 
 
    border-left-width: 1px; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: rgba(0, 0, 0, 0.1); 
 
    border-bottom-width: 1px; 
 
    border-bottom-left-radius: 30px; 
 
    border-top-right-radius: 30px; 
 
    height: 50px; 
 
}

<div class="grand-parent"> 
 
    <div class="big-child sale simple"> 
 
    <div class="small-child"> 
 
     <div> 
 
     <a href="#" class="button product_type_simple add_to_cart_button ajax_add_to_cart fa fa-shopping-cart"></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

此代碼風格 「添加到購物車」 按鈕的位置。但是，如果產品正在銷售中，那麼這個按鈕會顯示高於我需要的位置，示例顯示在附件中

我試過用jQuery修復這種情況，但沒有成功。我的代碼如下所示：

if ($('.grand-parent').find('.sale').length > 0) { 
 
    $('a.add_to_cart_button').animate({ 
 
    top: -8.4 + "%" 
 
    }, 0); 
 
}

但它的變化不僅對那些銷售「頂」屬性的所有產品。 如何更改代碼以顯示右上角的「添加到購物車按鈕」，以獲得各種類型的產品（銷售，變量或簡單）沒有間隙？ 在此先感謝。

Answer 1

不需要使用if塊，直接使用選擇器來定位容器中的按鈕。

$('.grand-parent .sale a.add_to_cart_button').animate({ 
    top: -8.4 + "%" 
}, 0);