javascript - 当 div 内的范围包含使用 jquery 的特定文本时更改 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');
  }
})

为什么不起作用？

我的FIDDLE IS HERE

Answer 1

因为您的选择器抓取多个元素，所以当您在其范围内使用 .each() 时，您可以使用 this 来引用当前元素正在迭代:

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

Updated Fiddle