如果 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);