如何在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/