使用jQuery在div中的跨度包含特定文本时更改div的背景

Question

我有以下3个div：

<div class="price"><span>Free</span> </div><br/>

<div class="price"><span>$250 USD</span> </div><br/>

<div class="price"><span>$800 USD</span> </div>

div的背景默认为红色，并且当该div的跨度包含单词“ Free”时，我想将其更改为绿色。

我已经尝试过的是此代码：

$('.price > span').each(function(){
  if ($('.price > span').text()==="Free"){
    $('.price').css('background-color', 'green');
  }
})

为什么不起作用？

我的宝贝在这里

Answer 1

因为选择器要捕获的元素不止一个，所以在范围内使用.each() ，可以使用this来引用要迭代的当前元素：

$('.price > span').each(function(){
  if($(this).text()==="Free"){
    $(this).parent(".price").css('background-color', 'green');
  }
});

更新小提琴

Answer 2

斯宾塞长得不错。 如果您想在没有jquery的情况下执行此操作，则可以这样做

https://jsfiddle.net/1maewneu/38/

document.querySelectorAll('.price > span').forEach(function(span) {
    span.parentElement.style.backgroundColor = span.innerText === 'Free'
    ? 'green'
    : null
})