如何在html / css / javascript中动态创建两排正方形

Question

我正在尝试创建2行，每行12个矩形（被认为是一个对象）。

我还想添加一个加号按钮，以便当用户单击任一端时，一组新的矩形会出现在原始矩形的上方或下方。 （取决于他们点击哪个加号按钮）。 我想我的两个加号按钮都起作用了。

因此，我试图实现以下目标：

http://i.stack.imgur.com/P26sC.png

到目前为止，我所做的是：

https://jsfiddle.net/zp5hnwmx/

 $(function () {
$("body").on('click', ".repeat", function (e) {
    e.preventDefault();
    var $self = $(this);
    var $parent = $self.parent();
    if($self.hasClass("add-bottom")){
      $parent.after($parent.clone());
    } else {
      $parent.before($parent.clone());
    }
});
});

我目前面临很多问题：

当我在本地运行代码时，矩形未正确对齐，它们环绕到下一行（我想要2行12）。 这是我看到的：

http://s16.postimg.org/ro0uzbrdx/Capture.png

创建矩形后，如何单独访问它们？

Answer 1

CSS的以下补充内容是否有帮助？

.repeat {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.repeat > * {
  flex: 0 0 30px;
}

Answer 2

尝试添加white-space: nowrap; 到哪个div拥有您的方形元素。 当然，如果页面很小，这会产生一些溢出，这需要由具有overflow: auto;的父元素来处理overflow: auto; 或某些此类陈述。

编辑：
至于：

创建矩形后，如何单独访问它们？

将事件侦听器附加到每个方框的效率是否低下取决于系统的性能要求。 关于哪种结构最有效的争论还在继续。 现在，这纯粹是主观的（因为我对您的项目只有有限的看法），我建议您做进一步的研究……但是我要说的是，将一个事件侦听器附加到包裹所有正方形的最直接父容器最好的主意。

由于您可以拥有数量未知的正方形（可能是数百个或数千个），因此您不想将事件侦听器附加到每个正方形。 这是重复代码的巨大内存。 取而代之的是，进行事件侦听器委派将大大提高内存效率。 将会浪费一点时间，但是应该是O（1），因此可以忽略不计。

总之，将一个事件侦听器应用于深父元素（例如<div class="container"> ）对于您而言可能是最有效的方法。

资源：
https://www.kirupa.com/html5/handling_events_for_many_elements.htm http://davewasmer.com/javascript-event-delegation/