javascript - 在导航栏中为每个父 li 添加每个类

Question

我的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>

我想像下面这样为每个父 li 添加类，使用 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>

Answer 1

使用 not() 过滤器和 addClass(function)

$('li').not('li li').addClass(function(i) {
  return String.fromCharCode(i + 97)
})

.a {color:red}
.b {color:orange}
.c {color:green}
.d {color:blue}
li li {color:black}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>