jquery - 根据html内容改变样式

Question

我有一个看起来像这样的 html 片段:

FIELD STATUS: <span class="field-status">CLOSED</span>

或者有时它看起来像这样:

FIELD STATUS: <span class="field-status">OPEN</span>

我如何根据内容使 CLOSED 为红色，OPEN 为绿色。这是我无法控制的更大系统的一部分，但我可以调整 HTML 源代码。如果那是最好的方式，我想我可以在那里得到一些 jQuery。

Answer 1

如果你可以更改 HTML 和 CSS，你应该像这样设置它，

FIELD STATUS: <span class="field-status closed">CLOSED</span>
FIELD STATUS: <span class="field-status open">OPEN</span>

.field-status.closed { color: red; }
.field-status.open{ color: green; }

要使其在 IE7 和 IE8 中正常工作，您需要确保您没有处于怪癖模式。

---

如果您做不到，您可以使用 jQuery 添加这些类。

$('.field-status').each(function(){
    var $this = $(this), text = $this.text(); 
    $this.addClass(text.trim().toLowerCase());
});

这适用于所有浏览器。