Javascript 在navbar中为每个父li添加每个类

我的html结构是这样的

 <ul>
   <li>items1</li>
   <li>items2
       <ul>
          <li>items2.1</li>
      </ul>
   </li>
   <li>items3
      <ul>
          <li>items3.1</li>
      </ul>
   </li>
   <li>items4</li>
</ul>

项目1
项目2

项目2.1


项目3

项目3.1


项目4

我想为每个父类添加类，如下所示，使用JavaScript有可能做到这一点吗

<ul>
       <li class="a">items1</li>
       <li class="b">items2
           <ul>
              <li>items2.1</li>
          </ul>
       </li>
       <li class="c">items3
          <ul>
              <li>items3.1</li>
          </ul>
       </li>
       <li class="d">items4</li>
    </ul>

项目1
项目2

项目2.1


项目3

项目3.1


项目4

假设列表项可能有n个，我们可以使用：

String.fromCharCode（97+索引）

获取字母（最多z）

使用

not（）

filter和

addClass（函数）

$（'li'）。非（'li'）。添加类（函数（i）{
返回字符串.fromCharCode（i+97）
})

.a{color:red}
.b{颜色：橙色}
.c{颜色：绿色}
.d{颜色：蓝色}
李莉{颜色：黑色}

项目1
项目2

项目2.1


项目3

项目3.1


项目4

如果我们想为LIU添加不同的名称，也可以使用此代码

var names = ["ab", "bc", "cd", "de"];
$("ul").first().children().each(function(index, el)
{
   $(el).addClass(names[index]);
});

---

只使用Javascript或jQueryany，没问题@John

$("ul").first().children("li").each((index, item) => {
  const letterFromIndex = String.fromCharCode(97 + index);
  let $item = $(item);
  $item.addClass(letterFromIndex);
});

var names = ["ab", "bc", "cd", "de"];
$("ul").first().children().each(function(index, el)
{
   $(el).addClass(names[index]);
});