筛选子元素特定属性：动态<li>背景色匹配返回undefined问题排查

嘿，我来帮你揪出问题所在！你的代码里有两个核心问题导致返回undefined：

1. 获取背景色的方式错误 #

你用了$(this).attr('background-color')，但background-color是CSS样式属性，不属于HTML元素的原生属性（像class、id这类才是元素属性）。要获取元素的计算后样式，得用jQuery的css()方法，而非attr()。

2. RGB格式的空格差异（潜在坑） #

不同浏览器返回的RGB字符串格式可能有细微差别：有的会返回rgb(72, 76, 111)（逗号后带空格），有的可能返回rgb(72,76,111)（无空格），直接硬匹配很可能因为格式不一致找不到目标元素。

修复后的代码 #

var matching = $('.nav_list li').filter(function(){
    // 获取元素背景色，统一去掉所有空格后再做比较
    var bgColor = $(this).css('background-color').replace(/\s/g, '');
    return bgColor === "rgb(72,76,111)";
});

// 先判断是否找到匹配元素，再执行后续操作
if(matching.length > 0){
    alert(matching.attr("class"));
} else {
    alert("没有找到匹配背景色的li元素");
}

额外小建议 #

如果这个背景色是通过CSS类设置的，其实更推荐直接查找对应类的元素——比通过样式匹配高效得多，比如：$('.nav_list li.your-target-class')。另外，动态生成的元素本身不影响这个逻辑，只要确保代码在元素渲染到DOM之后执行就行（如果是异步加载的元素，要把代码放在元素生成的回调里）。

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