javascript - 单击切换时增加序列号

Question

我被自动增加序列号卡住了，当我单击“添加”按钮时，它是添加新字段，但是序列号应该增加，你们可以帮助我吗..

<div class="input-group">
    <input type="text" name="sno[]" class="form-control" placeholder="S. No." value="1"/>
</div>
<span class='toggler date'>
    <a class="btn btn-condensed btn-sm">
        <div style="font-size:16px"> 
            <i class="fa fa-plus-square"></i>
        </div>
    </a>
</span>
<span class='toggler date' style='display:none;'>
    <a class="btn btn-condensed btn-sm">
        <div style="font-size:16px"> 
            <i class="fa fa-plus-square"></i>
        </div>
    </a>
</span>

当我点击添加按钮时，该 html 将附加

<div class='toggled_content1' style="padding-bottom:15px"></div>
<div class='toggled_content' style='display:none;'>
    <div class="form-group">
        <div class="col-md-2 col-xs-12"> 
            <div class="input-group">
                <input type="text" name="sno[]" class="form-control" placeholder="S. No."/>
            </div>
        </div>
    </div>
</div>

并切换 JavaScript，

jQuery(document).ready(function($){
    $('.toggler').on('click',function(){
        var fff=$(".toggled_content").html();
        $(".toggled_content1").append(fff); 
    });
});

你们能帮我，当我点击添加按钮时，如何自动增加S号。

Answer 1

您需要保留一个计数器才能获得下一个 S. 号。一种方法是获取已插入的 .form-group 元素的数量，并将其加 1 以获取下一个 S. 号。

$(document).ready(function($){
    $('.toggler').on('click',function(){
      var newSNum = $(".toggled_content1 .form-group").length + 1;
        var fff = $(".toggled_content").html();
        $(".toggled_content1").append(fff); 
        $(".toggled_content1 .form-group").eq( newSNum - 1 ).find("input").val( newSNum );
    });
});

.input-group
{
  clear: both;
  margin: 10px auto;
}

.toggler
{
  border: thin solid red;
  height: 50px;
  width: 50px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-group">
    <input type="text" name="sno[]" class="form-control" placeholder="S. No." value="1"/>
</div>


<span class='toggler date'>
    <a class="btn btn-condensed btn-sm">
        <div style="font-size:16px"> 
            <i class="fa fa-plus-square"></i>
        </div>
    </a>
</span>
<span class='toggler date' style='display:none;'>
    <a class="btn btn-condensed btn-sm">
        <div style="font-size:16px"> 
            <i class="fa fa-plus-square"></i>
        </div>
    </a>
</span>

<div class='toggled_content1' style="padding-bottom:15px"></div>


<div class='toggled_content' style='display:none;'>
    <div class="form-group">
        <div class="col-md-2 col-xs-12"> 
            <div class="input-group">
                <input type="text" name="sno[]" class="form-control" placeholder="S. No."/>
            </div>
        </div>
    </div>
</div>