如果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 block，直接使用选择器来定位容器中的按钮。

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