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

ブロックする必要はありません。セレクタを直接使用して、コンテナ内のボタンをターゲットにします。