使用JavaScript选择指定z-index值的元素并修改背景样式

原脚本的错误点 #

• 选择器无效：$(this).find("li") 试图在当前li内部查找子li，但你的HTML结构中li没有嵌套子li，因此这个选择器找不到任何元素，变量a是空的jQuery集合。
• DOM操作错误：即使a包含元素，它是jQuery对象，不能直接使用DOM原生的.style属性，需用jQuery的.css()方法操作样式。
• 逻辑偏差：原脚本给所有li统一设置z-index=3，完全偏离了“选中已有z-index=3的元素”的需求。

修正后的脚本 #

根据你的需求，分两种场景给出解决方案：

场景1：选中已有z-index=3的li元素 #

如果li已经通过CSS或其他脚本设置了z-index=3，可以用filter方法筛选出符合条件的元素，再设置背景：

$("li").filter(function() {
  // 注意：css("z-index")返回字符串，需与"3"做字符串比较
  return $(this).css("z-index") === "3";
}).css("background-color", "red");

场景2：先设置指定li的z-index=3，再添加红色背景 #

如果需要先给某个特定li（比如class为post3的元素）设置层级，再标记背景：

// 直接选中目标li，链式设置样式
$("li.post3").css({
  "z-index": 3,
  "background-color": "red"
});

或者需要遍历判断的场景（比如根据动态条件选择）：

$("li").each(function() {
  // 可替换为你的自定义判断逻辑，比如索引、类名等
  if ($(this).hasClass("post3")) {
    $(this).css({
      "z-index": 3,
      "background-color": "red"
    });
  }
});

注意：z-index属性仅对定位元素生效（需设置position: relative/absolute/fixed），如果你的li未设置定位，z-index可能不会生效，建议先添加基础样式：

li {
  position: relative;
}

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