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 元素。

要解决此问题，select 直接修改您要修改的元素。

$('.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>

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

jQuery find if closest element contains something then add CSS

jquery

if-statement

contains

closest