为每个列表元素生成不同的随机颜色DIV

Question

我想在每个列表元素后面生成三个随机颜色的div框.我从这开始,但它不起作用 - DIV似乎不可见:(

http://jsfiddle.net/dgweu/1/

非常感谢!

HTML

<div id="wrapper">
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</div>?

JS

$("li").each(function(){
    var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);
        for (var i = 0; i < 3; i++) {
            stripe = document.createElement('div');
            stripe.setAttribute('style', 'width:100px; height:3px; background-color' + randomColor);  
            wrapper = document.getElementById("wrapper");
            wrapper.appendChild(stripe);
        }
});

Answer 1

div是不可见的,因为CSS中存在语法错误.你错过了:之后background-color.

为了让div出现在lis 后面,你可以绝对地定位div和li相对s.

看看这个DEMO.我也整理了你的JS.