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>

Answer 2

var letters = "abcd";

$("ul").first().children().each(function(index, el)
{
    $(el).addClass(letters[index]);
});

Answer 3

假设列表项可以有n个，我们可以使用：String.fromCharCode(97 + index)来获取字母（最多z个）。

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

Answer 4

如果我们想为流添加其他名称，您也可以使用此代码

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

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

4 个答案: