jQuery查找最接近的元素是否包含某些内容，然后添加CSS

Question

我想更改DIV的背景，如果最接近的元素中的文本包含某些内容。我意识到这可能是一份重复，但我根本找不到它出错的地方。我没有错误。

if (jQuery(".price-box").closest(".product").find(".product-title a").is(":contains('90')")) {
  jQuery(this).closest(".product").find(".price-box").css('background-color', 'red');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
  <div class="image-box">
    <div class="price-box">Pricing</div>
  </div>
  <div class="box-text">
    <div class="title-wrapper">
      <p class="product-title">
        <a href="#">Title 90</a>
      </p>
    </div>
  </div>
</div>

如果有人可以启发我，我的jQuery出错了，我会很感激。

Answer 1

问题是因为if语句不在条件范围内运行，因此在这种情况下，this将参考window，而不是.price-box元素。

要解决问题，请选择要直接修改的元素。

$('.product:has(.product-title a:contains("90")) .price-box').addClass('red');

.red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
  <div class="image-box">
    <div class="price-box">Pricing</div>
  </div>
  <div class="box-text">
    <div class="title-wrapper">
      <p class="product-title">
        <a href="#">Title 90</a>
      </p>
    </div>
  </div>
</div>
<div class="product">
  <div class="image-box">
    <div class="price-box">Pricing</div>
  </div>
  <div class="box-text">
    <div class="title-wrapper">
      <p class="product-title">
        <a href="#">Title 45</a>
      </p>
    </div>
  </div>
</div>
<div class="product">
  <div class="image-box">
    <div class="price-box">Pricing</div>
  </div>
  <div class="box-text">
    <div class="title-wrapper">
      <p class="product-title">
        <a href="#">Title 190</a>
      </p>
    </div>
  </div>
</div>