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

Answer 2

斯宾塞看起来不错。如果你想在没有jquery的情况下这样做，你可以这样做

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

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

当div中的span包含使用jquery的特定文本时，更改div的背景

2 个答案: