jQuery根据另一个div中包含的文本修改div背景颜色

Question

我正在使用Wordpress插件来显示事件，我想根据另一个div中包含的文本修改背景颜色。

我有它的部分工作，但它改变了文本的背景颜色div.

我有下面的代码，我想修改mec bg颜色的背景色

HTML

<div class="event-grid-t2-head mec-bg-color clearfix">
<div class="mec-event-month">
<span class="mec-start-date-label" itemprop="startDate">28 September</span>
<span class="mec-end-date-label" itemprop="endDate"> - 28 December</span>
</div>
<div class="mec-event-detail">
<div class="mec-event-loc-place">Southern</div>
</div>
</div>

jQuery

jQuery(function ($) {

$(".mec-bg-color >>.mec-event-loc-place").each(function () {
console.log($(this).text());
var text = $(this).text().toLowerCase();
var color={'background-color':'#fff'};

switch (text) {
case "southern":
color = "#ce1870";
break;
case "south eastern":
color = "#6dc8bf";
break;
}
$(this).css("background-color", color);
});
});

我的代码只更改了.mec事件loc-place元素的颜色，但我希望它也更改容器mec-bg的颜色。

我觉得它很接近，我知道我错过了一些简单的东西。

提前感谢您的帮助，因为我还是jQuery和Javascript的新手。

Answer 1

一种方法是循环通过外部div，即：.mec-bg-color并使用.find()来获得所需的div文本，另一种方法则是使用closest，即：$(this).closest('.mec-bg-color').css("background-color", color);。

演示代码 ：

jQuery(function($) {
//loop through outer div
$(".mec-bg-color ").each(function() {
//use find to get text
console.log($(this).find(".mec-event-loc-place").text());
var text = $(this).find(".mec-event-loc-place").text().toLowerCase();
var color = {
'background-color': '#fff'
};
switch (text) {
case "southern":
color = "#ce1870";
break;
case "south eastern":
color = "#6dc8bf";
break;
}
$(this).css("background-color", color);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event-grid-t2-head mec-bg-color clearfix">
<div class="mec-event-month">
<span class="mec-start-date-label" itemprop="startDate">28 September</span>
<span class="mec-end-date-label" itemprop="endDate"> - 28 December</span>
</div>
<div class="mec-event-detail">
<div class="mec-event-loc-place">Southern</div>
</div>
</div>

Answer 2

您也可以使用jQuery contains用于此

$(document).ready(function() {
$('.mec-event-loc-place:contains("southern")').css({'background-color':' #ce1870'});
$('.mec-event-loc-place:contains("south eastern")').css({'background-color':'#6dc8bf'});
});

如果代码更少，它也会有同样的效果。