html/css/javascriptで2行の正方形を動的に作成する方法

Question

私は12行の長方形（1つのオブジェクトと見なされます）の2行を作成しようとしています。

また、ユーザーがどちらかの端をクリックしたときに、新しい矩形のセットが元のものの上または下に表示されるように、プラスボタンを追加したいと考えています。 （どのプラスボタンをクリックするかによって異なります）。私は両方のプラスボタンが働いていると思う。

だから私は、次のことを達成しようとしています：

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

を：

私ローカルでコードを実行すると、四角形が正しく配置されず、次の行に折り返されます（12行2列が必要です）。これは私が見たものである。

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

長方形を作成した後、私はそれらを個別にアクセスすることができますか？

Answer 1

角の要素を保持しているdivにwhite-space: nowrap;を追加してみてください。もちろん、ページが小さければ、オーバーフローが発生します。親要素がoverflow: auto;などのステートメントで処理する必要があります。

編集：
について：

長方形を作成した後、どのように私はそれらを個別にアクセスすることができますか？

イベントリスナーを各四角にアタッチするかどうかは、システムのパフォーマンス要件によって異なります。そして、どの議論が最も効率的な構造であるかについて議論が続く。さて、これは純粋に主観的です（私はあなたのプロジェクトについては限られた視野しか持っていません）。さらなる研究をすることをお勧めします...しかし、私はあなたの四角形を包む最も直近の親コンテナに1つのイベントリスナーを付けると言うでしょう最高のアイデアだろう。

未知数（潜在的に数百または数千）を持つことができるため、各リスナーにイベントリスナーを添付したくありません。それは重複したコードの巨大なメモリーシンクです。代わりに、イベントリスナの委任を行うとメモリ効率がはるかに向上します。少し時間が無駄になりますが、O（1）なので無視してください。

要約すると、1つのイベントリスナーを深い親要素（たとえば<div class="container">）に適用すると、最も効率的な方法になる可能性があります。

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

Answer 2

あなたのCSSに次の機能が追加されましたか？

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