Javascript 关于分组和追加div的问题_Javascript_Html_Css

Javascript 关于分组和追加div的问题

javascript html css

Javascript 关于分组和追加div的问题,javascript,html,css,Javascript,Html,Css,[EDIT]我尝试使用setTimeout方法每1秒动态创建6条水平线。所以它应该每1秒显示一组6条水平线。这里，我把6条水平线称为组。但是，我希望水平地附加每个组，而不是垂直地附加每个组。当尝试追加组时，如果边框宽度不够长，无法容纳新组，请将新组追加到下一行。我还希望在6条水平线的每一组之间有一个“pilar”，我只想创建8组水平线。下面的第一张图片是我运行代码后得到的。第二个是我需要的。下面的代码是我的html、css和js代码。希望有人能帮我。先谢谢你 html: js: $（文档）.

[EDIT]我尝试使用setTimeout方法每1秒动态创建6条水平线。所以它应该每1秒显示一组6条水平线。这里，我把6条水平线称为组。但是，我希望水平地附加每个组，而不是垂直地附加每个组。当尝试追加组时，如果边框宽度不够长，无法容纳新组，请将新组追加到下一行。我还希望在6条水平线的每一组之间有一个“pilar”，我只想创建8组水平线。下面的第一张图片是我运行代码后得到的。第二个是我需要的。下面的代码是我的html、css和js代码。希望有人能帮我。先谢谢你

html:

js:

$（文档）.ready（函数（）{
makeItHappen（0）；
});
函数makeItHappen（顺序）{
对于（变量i=0；i<7；i++）{
var hr=document.createElement（'hr'）；
hr.className=“装饰”
hr.id=“hr”+i；
$（'#output'）。追加（hr）；
}
makeTable（函数（）{
如果（++顺序<7）{
makeItHappen（订单）；
}
});
}
函数makeTable（回调）{
setTimeout（函数（）{
回调（）；
}, 1000); 
}

您可以使用display:flex获得所需的输出

$（文档）.ready（函数（）{
makeItHappen（0）；
});
函数makeItHappen（顺序）{
var输出=$（“#输出”）；
var div=$（“”）；
部门属性（“id”，订单）；
对于（变量i=0；i<7；i++）{
var hr=document.createElement（'hr'）；
hr.className=“装饰”
hr.id=“hr”+i；
美元（div）.追加（hr）；
}
输出追加（div）；
makeTable（函数（）{
如果（++顺序<7）{
makeItHappen（订单）；
}
});
}
函数makeTable（回调）{
setTimeout（函数（）{
回调（）；
}, 1000);
}

.deco{
边框底部：1px纯黑；
宽度：120px；
左边距：0px；
边缘底部：10px；
z指数：2；
位置：相对位置；
/*显示：内联块*/
左边距：10px；
}
#输出div:n子级（2n+1）{
右边框：5px纯绿色；
边缘顶部：5px；
}
#输出div:n个子（2n）{
右边框：5px纯绿色；
边缘顶部：5px；
高度：自动；
}
#输出{
显示器：flex；
柔性包装：包装；
}
#输出{
背景：#ffe6e6；
宽度：500px；
位置：绝对位置；
}

为什么不直接使用一个表而不是伪造一个表？为什么有for循环调用4次settimeout..那么，你的意思是你想要4组，每组6个水平方向lines@happymacarts谢谢你的回复。我不使用表格的原因是，这样我就无法将id分配给表格中的水平边框。请同意上述注释。。另外，带有settimeout的for循环将创建4次，所有这些时间都将在~1秒内超时。。这是你的意图吗？这似乎很奇怪。@Geeky在makeTable（）中，我循环了6次来创建6条水平线。在ready（）方法中，我每1秒创建6条水平线，在这种情况下我只想创建4次。我知道这听起来很奇怪，但这正是我需要的。

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="code.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="code_js.js"></script>
</head>
<body>
    <div id = "output">

    </div>

</body>
</html>

.deco {
    border-bottom: 1px solid black;
    width: 120px;
    margin-left:0px;
    margin-bottom:10px;
    z-index: 2;
    position: relative;
    /*display: inline-block;*/
    margin-right: 20px;
}


#output {
    background: #ffe6e6;
    width: 600px;
    height: 800px;
    position:absolute;
}

$(document).ready(function() {

    makeItHappen(0);
});

function makeItHappen(order) {
    for (var i = 0; i < 7; i++) {
        var hr = document.createElement('hr');
        hr.className = "deco"
        hr.id = "hr" + i;
        $('#output').append(hr);
    }
    makeTable(function() {
        if(++order < 7) {
            makeItHappen(order);
        }
    });
}

function makeTable(callback) {
    setTimeout(function() {
        callback();
    }, 1000); 
}