javascript - jQuery、CSS : auto-color HTML lists?

Question

如何自动为列表元素生成不同的背景色？

这里是静态 html 代码，应该用不同的背景颜色显示。

<ul>
    <li>
        <a href=#">I am the first element</a>
    </li>
    <li>
        <a href=#">I am the 2nd element</a>
    </li>
    <li>
        <a href=#">I am the 3rd element</a>
    </li>
</ul>

没有机会手动添加 class 或 style，所以我认为使用 jQuery 是最简单的解决方案。这是我的第一次尝试:

$(document).ready(function() {
    $('.toc > ul > li').each(function(e){
        var n = $(this).children().text().length*222222;
        var h = n.toString(16).substr(0,6);
        $(this).css({'background-color':'#'+h});
        //$(this).append(h);
    });
});

结果有点难看，并且有相似的颜色导致此脚本无法使用。

还有其他制作漂亮的自动彩色列表的想法吗？

Answer 1

为了使事物看起来不错，您需要定义一组颜色。随机颜色通常会很糟糕。

var clr = "000000,22222,44444,66666,88888,a0a0a0".split(",")
$('.toc > ul > li').each(function(){
      $(this).css('background-color',clr[$(this).index()])   
})