递增jquery中行的序列号

Question

我正在编写一段代码来动态生成行。我遇到了一个问题，行号是错误生成的。问题来了，第一个可见的行的序列号被改变了，其他的只是用正确的format.Please下移了任何人告诉我应该怎么做才能正确地获得序列号，下面是我的代码。html代码

​

    var counter = 1;
    $(function () {

    $("#button1").click(function () {
        counter++;
        $('#dynamic').append($("#main-row").clone().attr("id", counter + 1));
        $("#serial").text(counter);

    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="dynamic">
              <div class="row " id="main-row">
               <div class="col-sm-1 serial  " id="serial">1</div>
                   <div class="col-sm-2  ">
                    <select class="container-fluid" name="select item"        id="selection">
                    
                    <option>Please select item</option>
                        <option value="30000" id="30000">Computer</option>
                        <option value="4000" id="4000">Mobile</option>
                        <option value="5000" id="5000">LCD</option>
                        <option value="1500" id="1500">Keyboard</option>
                        <option value="500" id="500">Mouse</option>
                    
                     </select>
            </div>
            <div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div>
            <div class="col-sm-2 "><input class="length price " type="number" name="unitPrice"  id="price1" value="" min="1" readonly/></div>  
            <div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total"  readonly/></div>
            <button class="btn-primary col-sm-1 del ">Delete</button>
        </div>

    </div>
    <div class="btn-group-vertical offset-10">
        <button class="btn btn-primary" id="button1">Add Row</button>
        <button class="btn-warning" id="btnSubmit">Submit Order</button>
    </div>

​

Answer 1

您必须将id保留为唯一属性值。当您克隆内容时，该内容中的所有ids都将被复制。所以，你不会有唯一的ids。

我更改了你的代码，用classes代替了ids

​

var counter = 1;
    $(function () {

    $("#button1").click(function () {
        counter++;
        $('#dynamic').append($(".main-row:first").clone().attr("id", "row_" + counter));
        $("#row_" + counter).find(".serial").text(counter);

    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="dynamic">
              <div class="row main-row">
               <div class="col-sm-1 serial">1</div>
                   <div class="col-sm-2  ">
                    <select class="container-fluid" name="select item"        id="selection">
                    
                    <option>Please select item</option>
                        <option value="30000">Computer</option>
                        <option value="4000">Mobile</option>
                        <option value="5000">LCD</option>
                        <option value="1500">Keyboard</option>
                        <option value="500">Mouse</option>
                    
                     </select>
            </div>
            <div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div>
            <div class="col-sm-2 "><input class="length price " type="number" name="unitPrice"  id="price1" value="" min="1" readonly/></div>  
            <div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total"  readonly/></div>
            <button class="btn-primary col-sm-1 del ">Delete</button>
        </div>

    </div>
    <div class="btn-group-vertical offset-10">
        <button class="btn btn-primary" id="button1">Add Row</button>
        <button class="btn-warning" id="btnSubmit">Submit Order</button>
    </div>

​

Answer 2

为此，您可以使用css计数器

检查以下代码片段

​

var counter = 1;
$(function() {

  $("#button1").click(function() {
    counter++;
    $('#dynamic').append($("#main-row").clone().attr("id", counter + 1));


  });
});

.container {
  counter-reset: row;
  /* Set the row counter to 0 */
}

.container .row::before {
  counter-increment: row;
  /* Increment the row counter*/
  content: counter(row) ": ";
  /* Display the row */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="dynamic">
  <div class="row " id="main-row">

    <div class="col-sm-2  ">
      <select class="container-fluid" name="select item" id="selection">
                    
                    <option>Please select item</option>
                        <option value="30000" id="30000">Computer</option>
                        <option value="4000" id="4000">Mobile</option>
                        <option value="5000" id="5000">LCD</option>
                        <option value="1500" id="1500">Keyboard</option>
                        <option value="500" id="500">Mouse</option>
                    
                     </select>
    </div>
    <div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div>
    <div class="col-sm-2 "><input class="length price " type="number" name="unitPrice" id="price1" value="" min="1" readonly/></div>
    <div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total" readonly/></div>
    <button class="btn-primary col-sm-1 del ">Delete</button>
  </div>

</div>
<div class="btn-group-vertical offset-10">
  <button class="btn btn-primary" id="button1">Add Row</button>
  <button class="btn-warning" id="btnSubmit">Submit Order</button>
</div>

​

希望能有所帮助

Answer 3

我认为你应该在附加到container.After的行的基础上增加计数器，使用这个逻辑，你的代码将如下所示。

$("#button1").click(function () {
        var counter = $(".container>.row").length;
        var next_id = counter + 1;
        $('#dynamic').append($("#main-row").clone().attr("id", next_id));
        $("#"+next_id).find(".serial").text(next_id);
});