javascript - 为每个<li>更改不同的类

我创建了一个列表，并尝试为每个列表添加一个不同的类名。目前，这是我的工作：

HTML：

<div class="collapse navbar-collapse" id="navbar-color">
<ul>
   <li><a href="#">List Item 1</a></li>
   <li><a href="#">List Item 2</a></li>
   <li><a href="#">List Item 3</a></li>
</ul>
</div>

js：

$(document).ready(function(){
    var color=['red-dark','orange-dark','orange','yellow','grey','green','green-dark'];
    $('#navbar-color ul li').each(function(i){
        $(this).addClass(colors[i]);
    });
});

任何帮助将不胜感激。

最佳答案

您的选择失败，因为您正在捕获带有ID的<ul>并试图在其中找到<ul>。

正如@Tushar所说，请使用以下命令：

$(document).ready(function(){
    var color=['red-dark','orange-dark','orange','yellow','grey','green','green-dark'];
    $('#navbar-color li').each(function(i){ // remove ul
        $(this).addClass(color[i]);
    });
});

您还有一个多余的双引号$('#navbar-color"将被删除

关于javascript - 为每个<li>更改不同的类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32263380/