使用prepend的动态序列框逻辑

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。

Answer 2

试试这个： - http://jsfiddle.net/adiioo7/2UAqW/3/

<强> JS： -

var counter=2;
$('#add').click(function(){
    var value = counter++;
    var myHtml = "<div class='boxFirst'>" + value +"</div>";
    $("#wrap").append(myHtml);
});

<强> HTML： -

<div id="wrap">
    <div class="boxFirst">1</div>

</div>
<div id="add">+</div>

<强> CSS： -

#wrap{
    background-color:#eee;
    width: 200px;
    height 800px;
}

.boxFirst{
    width: 100px;
    height: 100px;
    background-color:blue;
    text-align: center;
    color: #fff;
    position: relative;
    float:left;
}

#add{
      width:40px;
    height: 40px;
    text-align: center;
    color: #fff;  
    background-color:red;
    float: right;
    margin:40px 40px 0  0;
}