javascript - 为每个列表元素生成不同的、随机颜色的 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 出现在 li 后面，您可以将 div 绝对定位，将 li 相对定位。

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