解决jQuery选中z-index=3的li元素后标题样式不生效问题

问题场景 #

需求：从给定的HTML列表中，选中z-index等于3的<li>元素，将其背景设为红色，内部标题（.title）设为白色。但执行编写的jQuery脚本后，li背景成功变红，标题颜色却未发生变化。

原始代码 #

HTML结构

<ul>
    <li class="post1">
        <div class="content">
            <h4 class="title">title post1</h4>
        </div>
    </li>

    <li class="post2">
        <div class="content">
            <h4 class="title">title post2</h4>
        </div>
    </li>

    <li class="post3">
        <div class="content">
            <h4 class="title">title post3</h4>
        </div>
    </li>

    <li class="post4">
        <div class="content">
            <h4 class="title">title post4</h4>
        </div>
    </li>

    <li class="post5">
        <div class="content">
            <h4 class="title">title post5</h4>
        </div>
    </li>
</ul>

失效的jQuery脚本

$("li").each(function (index) {
    if ($(this).css("z-index") == 3) {
      $(this).css("background-color","red");
       $(this).children(".title").css("color","white");
    }
});

问题原因 #

children()方法仅会查找当前元素的直接子元素，但从HTML结构可知，.title是<li>的孙子元素（层级为：li → .content → .title），并非直接子节点，因此$(this).children(".title")无法匹配到目标元素，导致标题颜色修改不生效。

解决方案 #

将children()替换为find()方法（会查找所有后代元素），或者通过层级选择器明确指定路径：

方案1：使用find()方法

$("li").each(function (index) {
    if ($(this).css("z-index") == 3) {
      $(this).css("background-color","red");
       $(this).find(".title").css("color","white");
    }
});

方案2：明确后代层级路径

$("li").each(function (index) {
    if ($(this).css("z-index") == 3) {
      $(this).css("background-color","red");
       // 方式1：通过子元素层层查找
       $(this).children(".content").children(".title").css("color","white");
       // 方式2：直接指定后代选择器
       // $(this).find(".content .title").css("color","white");
    }
});

额外提示 #

如果z-index=3的<li>元素是通过CSS类定义的层级，也可以直接通过类选择器筛选，避免遍历所有li元素，提升效率。比如假设该li有high-zindex类，可直接写：

$("li.high-zindex").css("background-color","red").find(".title").css("color","white");

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