如何实现嵌套ul/li层级节点的颜色交替变化效果

问题 #

我有一个UL/LI嵌套结构，要求父节点文字为黑色，子节点为绿色，更深层级的子节点按黑、绿交替变色。尝试用jQuery给奇偶项加类设置样式，但没达到预期效果，求HTML、CSS和JavaScript的实现方案及层级交替逻辑。

解决方案 #

通过jQuery计算每个LI的嵌套层级（统计父级UL的数量），根据层级奇偶性切换文字颜色，代码如下：

if ($(".sitemap-list")) {
    $('ul').find('li').each(function () {
        // 计算当前li的嵌套层级：父级ul的数量
        var nestingLevel = $(this).parents('ul').length;
        // 从第2层开始应用交替颜色规则
        if (nestingLevel >= 2) {
            // 偶数层级用深绿色，奇数层级用深灰色
            var textColor = (nestingLevel % 2 === 0) ? '#004f39' : '#32363D';
            // 统一设置字体权重为600
            var fontweight = '600';
            $(this).find('a').css({
                'color': textColor,
                'font-weight': fontweight
            });
        } 
    });     
}

逻辑说明 #

1. 层级计算：通过$(this).parents('ul').length获取当前LI的嵌套深度，根UL下的LI层级为1，其子UL下的LI层级为2，以此类推。
2. 颜色规则：从层级2开始，偶数层级使用深绿色（#004f39），奇数层级使用深灰色（#32363D），实现黑绿交替效果。
3. 样式应用：将颜色和字体权重直接应用到LI内的A标签，确保文字样式生效。

![嵌套列表样式需求示例]
![实现后的嵌套列表样式示例]

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