无法获取嵌套span文本，如何根据其内容动态修改div背景色？

1. 选择器错误导致无法定位目标元素 #

原代码的选择器指向带EmbeddedMiniatureVisualization类的span，但我们需要的是它内部包含文本的最内层span。正确的选择器应该直接定位到这个最内层元素，比如：

$(".fundoDiv span.EmbeddedMiniatureVisualization span")

或者更简洁的方式，直接找.fundoDiv下的最后一层span：

$(".fundoDiv span:last")

2. 条件判断用了赋值而非比较 #

原代码中if (text = 'OK')是赋值操作，会永远返回true，应该用严格相等运算符===，同时可以加上trim()处理文本前后的空白：

if (text.trim() === 'OK')

3. 需确保动态元素加载完成 #

如果HTML是动态生成的，要在DOM渲染完成后再执行代码，用$(document).ready()包裹逻辑即可；如果是后续异步加载的内容，还需监听元素变化。

修复后的完整代码 #

$(document).ready(function() {
    // 定位到包含目标文本的最内层span
    $(".fundoDiv span.EmbeddedMiniatureVisualization span").each(function() {
        var text = $(this).text().trim();
        console.log(text);
        // 只修改当前元素所在的.fundoDiv背景
        var targetDiv = $(this).closest(".fundoDiv");
        if (text === 'OK') {
            targetDiv.css("background-color", "green");
        } else {
            targetDiv.css("background-color", "red");
        }
    });
});

动态内容的额外处理 #

如果HTML是第三方插件或AJAX异步生成的，需要监听元素变化来触发逻辑：

// 创建观察者监听.fundoDiv的内容变化
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length) {
            // 内容更新后重新执行背景色判断
            $(".fundoDiv span.EmbeddedMiniatureVisualization span").each(function() {
                var text = $(this).text().trim();
                var targetDiv = $(this).closest(".fundoDiv");
                targetDiv.css("background-color", text === 'OK' ? "green" : "red");
            });
        }
    });
});

// 启动监听，监听子元素和后代元素的变化
observer.observe(document.querySelector(".fundoDiv"), {
    childList: true,
    subtree: true
});

内容的提问来源于stack exchange，提问作者Marcio Lino