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>

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

1 个答案: