JQuery найти, если ближайший элемент содержит что-то, а затем добавить CSS - PullRequest
Новая
       52

JQuery найти, если ближайший элемент содержит что-то, а затем добавить CSS

0 голосов
/ 20 декабря 2018

Я хочу изменить фон 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 работает неправильно, я был бы очень признателен за это.

1 Ответ

0 голосов
/ 20 декабря 2018

Проблема в том, что операторы if не выполняются в рамках условия, поэтому в этом случае this будет ссылаться на window, а не на элемент .price-box.

Toустранить проблему, выберите элемент, который вы хотите изменить напрямую.

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