如果 X 为真，则执行此操作，但如果 X 为真且 Y 为假，请执行此操作

Question

您好，我正在尝试开展一项活动，让网站上的所有产品都有销售横幅。有些产品已经有销售横幅，但对于其他没有的产品，我想为这些产品添加横幅。我已经能够做到这一点，但我遇到的问题是，如果产品缺货，那么我不希望将销售横幅添加到这些产品中。

我创建了一个 sn-p 试图展示我到目前为止所拥有的东西。

• 产品 1 是已经有销售横幅的产品。
• 产品 2 是没有销售横幅的产品
• 产品 3 是没有销售横幅且缺货的产品

产品 1 有一个销售横幅，因此无需对此进行任何操作。对于产品 2，我希望添加销售横幅，对于产品 3，我不希望添加销售横幅，因为它缺货。

对此的任何帮助将不胜感激。

$(".saleWrapper").each(function(index){
  if ($(this).children('.promoText').length === 0){
    $(this).append("<span class='promoText'>I'm ALSO on Sale</span>");
  }
})

.product-wrapper {
  display: inline-block;
  border: 1px solid black;
}
.promoText {background: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-wrapper">
<p>Product 1</p>
  <div class="saleWrapper">
      <span class="promoText">I'm on Sale</span>
  </div>
</div>

<div class="product-wrapper">
<p>Product 2</p>
  <div class="saleWrapper"></div>
</div>

<div class="product-wrapper">
<p>Product 3</p>
  <div class="saleWrapper"></div>
  <div class="productOutOfStock">
    <p class="outOfStock">I'm Out Of Stock</p>
  </div>
</div>

Answer 1

更新/改写的问题基本相同，问题相同。

第 3 节的“缺货”消息不是 .saleWrapper 的子项 - 因此您不能（轻松）从 saleWrapper 开始。

相反，从product-wrapper 开始，找到匹配的产品，然后找到添加消息的位置。有关详细信息，请参阅下面的原始答案。

$(".product-wrapper:not(:has(.promoText,.productOutOfStock))")
    .find(".saleWrapper")
    .append("<span class='promoText'>I'm ALSO on Sale</span>");

.product-wrapper {
  display: inline-block;
  border: 1px solid black;
}
.promoText {background: pink;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-wrapper">
<p>Product 1</p>
  <div class="saleWrapper">
      <span class="promoText">I'm on Sale</span>
  </div>
</div>

<hr/>

<div class="product-wrapper">
<p>Product 2</p>
  <div class="saleWrapper"></div>
</div>

<hr/>

<div class="product-wrapper">
<p>Product 3</p>
  <div class="saleWrapper"></div>
  <div class="productOutOfStock">
    <p class="outOfStock">I'm Out Of Stock</p>
  </div>
</div>

---

编辑：回答原始问题

在没有销售横幅的任何产品上打印消息，即本示例中的第二个产品

在:has() 中，您可以放置​​任何选择器，在这种情况下，您需要, 选择器（或）。

:has(.product-slab__markdown-promotion-inner,.product-slab__cta)

但是，您的 __cta 不在当前的 product-slab__markdown-promotion 内，因此您必须从 product-slab__wrapper 开始升级 - 然后，一旦您拥有正确的 __wrapper(s)，您就可以向下移动到要添加消息的位置，使用.find()。

您还可以删除 .each()，因为 jquery 已经对集合进行了操作

给予：

$(".product-slab__wrapper:not(:has(.product-slab__markdown-promotion-inner,.product-slab__cta))")
    .find(".product-slab__markdown-promotion")
    .append("<span class='product-slab__markdown-promotion-inner'><span class='promo-text'>ADD MESSAGE</span></span>");

.product-slab__wrapper {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__wrapper">
  <div class="product-slab__markdown-promotion">
    <div class="product-slab__markdown-promotion-inner">
      <span class="promo-text">20% discount</span>
    </div>
  </div>
  <div class="product-slab__stock"></div>
  <p>€0,00</p>
</div>

<hr/>
<div class="product-slab__wrapper">
  <div class="product-slab__markdown-promotion">
  </div>
  <div class="product-slab__stock"></div>
  <p>€0,00</p>
</div>

<hr/>


<div class="product-slab__wrapper">
  <div class="product-slab__markdown-promotion"></div>
  <div class="product-slab__stock"><p class="btn btn__secondary btn__disabled product-slab__cta btn--full" disabled="">Out of stock</p></div>
  <p>€0,00</p>
</div>