Question

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

非常感谢！

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。

Answer 2

你在background-color元素之后错过了javascript中的冒号。 jsFiddle

stripe.setAttribute('style', 'width:100px; height:3px; background-color:' + randomColor);

Answer 3

您的想法是正确的，但您的JavaScript中有一个简单的语法错误。

stripe.setAttribute('style', 'width:100px; height:3px; background-color:' + randomColor);

您只是忘记了:函数中background-color后的冒号（setAttribute()）。

Answer 4

您的背景颜色

后缺少冒号

另一件事，你说你想在每个列表元素后插入彩色div。你的脚本只会在最后添加元素

我相信这就是你想要的 http://jsfiddle.net/dgweu/4/
更频繁地使用jquery，这非常方便。 jQuery的insertbefore方法使一切变得更容易您创建一个元素，查询它，然后在每个li元素

之前插入它

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

4 个答案: