javascript - プリペンドを使用した動的シーケンス ボックス ロジック

Question

http://jsfiddle.net/2UAqW/4/

    var counter = 1;
$('#add').click(function(){
    var value = ++counter;
    var myHtml = "<div id='boxFirst'>" + value +"</div>";
    $(myHtml).appendTo("#boxFirst");
});

私はこのようなことを達成したい:

Answer 1

完全な動作例を次に示します。

http://jsfiddle.net/DNR7R/

コード :

var counter = 1;
$('#add').click(function(){
    var value = ++counter;
    var myHtml = "<div id='box"+value+"' class='box'>" + value +"</div>";
    $(myHtml).insertAfter("#box"+(value - 1));
});

カウンター var は初期化されませんでした。変数がすでにインクリメントされた値を持つように変更var value = counter++;しvar value = ++counter;ました。value

ID が一意になるように変更されました。値を連結して、box1、box2、box3 などの ID を取得します...

div で必要に応じてそれらを配置できるようにするために、プロパティを追加display: inline-blockしfloat:leftました。CSSの場合、私はそれらをすべて同じクラスにしboxました。

#addまた、 div css を削除して、別の div として扱います。