javascript - 如果满足特定条件，则更改子元素的颜色

Question

如果有“缺货消息”，我想更改子元素的颜色。该消息将在运行时生成，因此可以针对其他元素进行更改，我只想在文本“缺货”时更改颜色。我不能修改我只能应用 css 或 javascript/jquery 的代码。 这是我的 html 代码:

<span id="stockStatus" class="status">
     <span id="itemavail">Out Of Stock</span>
</span>

我试过这段 jQuery 代码，但它不起作用:

$(document).ready(function () {
    $(".status").each(function(){
        if ($(this).children('span').text().trim() == "Out Of Stock") {
            $(this).children('span').css("color", "red");
        }
     });
});

Answer 1

更改内容后(您没有提到如何将它们添加到页面上)，您可以简单地使用:

$(".status span:contains(Out Of Stock)").css("color", "red");

Working Demo