javascript – 有关分组和附加div的问题

[编辑]我尝试使用setTimeout方法每1秒动态创建6条水平线.因此它应该每1秒显示每6条水平线作为一组.在这里,我将6条水平线称为组.但是,我希望水平而不是垂直追加每个组.尝试追加组时,边框的宽度不足以容纳新组,请将新组追加到下一行.而且我想在6条水平线的每个地方之间有一个“毛发”,我只想创建8组水平线.下面的第一张图是我运行代码后得到的.第二个是我需要的.下面的代码是我的html,css和js代码.希望有人可以帮助我.先感谢您.

HTML：

<!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>

CSS：

.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;
}

JS：

$(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); 
}

解决方法

您可以使用display：flex来获得您期望的输出

$(document).ready(function() {

  makeItHappen(0);
});

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

  makeTable(function() {
    if (++order < 7) {
      makeItHappen(order);
    }
  });
}

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

.deco {
  border-bottom: 1px solid black;
  width: 120px;
  margin-left: 0px;
  margin-bottom: 10px;
  z-index: 2;
  position: relative;
  /*display: inline-block;*/
  margin-left: 10px;
}
#output div:nth-child(2n+1) {
  border-right: 5px solid green;
  margin-top: 5px;
}
#output div:nth-child(2n) {
  border-right: 5px solid green;
  margin-top: 5px;
  height: auto;
}
#output {
  display: flex;
  flex-wrap: wrap;
}
#output {
  background: #ffe6e6;
  width: 500px;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">

</div>

希望能帮助到你

javascript – 有关分组和附加div的问题

解决方法

相关文章