前面加上最后一个

Question

我有以下代码：

HTML：

   <div class="row" id="dvNumbers" style="margin-bottom:20px; margin-top:10px">
      <div class="col-md-3">
           <a class="btn btn-primary" data-val="1" id="btnNbr">Add Number</a>
      </div>
  </div>

jQuery：

    var w = 0;

    // start
    $('[id*=btnNbr]').on('click', function () {
        w++;
        var str = "";
        str += "<label>" + w + "</label><br\>";            
        $('#dvNumbers').prepend(str);          
    });

我看到的结果是这样的：

我喜欢这样，以便最后一个添加的号码位于“添加号码”按钮之前的底部，例如：

1

2

3

4

Answer 1

如果您希望这样做，则最新的数字位于您的示例的底部，然后使用.before()或.prev()

var w = 0;

// start
$('[id*=btnNbr]').on('click', function() {
  w++;
  var str = "";
  str += "<label>" + w + "</label><br\>";
  if ($('#dvNumbers').prev("label").length == 0) {
    $('#dvNumbers').before(str);
  } else {
    $('#dvNumbers').prev("label").after(str);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="dvNumbers" style="margin-bottom:20px; margin-top:10px">
  <div class="col-md-3">
    <a class="btn btn-primary" data-val="1" id="btnNbr">Add Number</a>
  </div>
</div>