Javascript 更改div'；当该div中的span包含使用jquery的特定文本时

我有以下三个分区：

<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>

为什么它不起作用

---

My

因为您的选择器捕获的不止一个元素，所以当您使用

时。在其作用域内的每个（）

都可以使用

此

引用正在迭代的当前元素：

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

---

因为选择器抓取的元素不止一个，所以当您使用

时，在其作用域内的每个（）

都可以使用

此

引用正在迭代的当前元素：

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

---

斯宾塞餐厅看起来不错。如果不想使用jquery，可以这样做

---

斯宾塞的看起来不错。如果不想使用jquery，可以这样做

---

感谢您的回答，但您的解决方案是更改跨度的背景颜色，而不是整个跨度的背景颜色div@Designer我的错，小姐，当我做这个的时候，读你的内心选择器。您只需获取该元素的父元素

.price

（通过执行：

$（this）.parent（.price”）

）。更新了我的答案。非常感谢你。“父母”是我所缺少的。现在它工作得很好，我会选择你的答案作为最佳答案。感谢你的回答，但你的解决方案是改变跨度的背景颜色，而不是整个跨度的背景颜色div@Designer我的错，小姐，当我做这个的时候，读你的内心选择器。您只需获取该元素的父元素

.price

（通过执行：

$（this）.parent（.price”）

）。更新了我的答案。非常感谢你。“父母”是我所缺少的。现在它工作完美，我会选择你的答案为最佳。

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