Question

我正在使用jQuery添加/删除更多div。这是我的代码：

jQuer代码：

$(document).ready(function() {
   $('#oneway').click(function() {
      $('.oneway_wrap').show();
      $('.return_wrap').hide();      
   });
});

// Add/remove code
var counting = 0;
$("body").on("click",".add_button",function(){

   // this is not the correct way to increment...  :(
   $('.counting').html(counting);

   var html = $(".oneway_wrap").first().clone();
   $(html).find(".change").html("<a class='btn btn-danger remove remove_more'>- Remove</a>&nbsp;<button class='btn add_button add_more'><strong>Add More (+)</strong></button>");
   $(".oneway_wrap").last().after(html);
   counting++;
});

HTML代码：

<!-- oneway wrap -->
<div class="oneway_wrap">
   <div class="row">
      <div class="form-group">
         <div class="col-md-12">
            <h5 class="badge badge-success counting">Details 1</h5><hr><br/>
         </div>
      </div>
      <div class="col-md-6">
         <div class="form-group">
            <label>Guest Name</label>
            <input type="text" name="ow_gname[]" class="form-control" placeholder="Guest name">
         </div>
      </div>                                 
      <div class="col-md-12">
         <div class="form-group change">
            <a class="btn add_button add_more"><strong>Add More (+)</strong></a>
         </div>
      </div>
   </div>
</div><!-- oneway wrap end -->

<!-- return wrap -->
<div class="return_wrap">
   <!-- same html code here... for retrun way with return classes -->
</div><!-- return wrap end -->

此添加/删除工作正常。 现在，我想显示在该类中添加或删除的行数（计数）

<h5 class="badge badge-success counting">Details 1</h5><hr><br/>

因此，如果再添加2行，则它将为Details 2, Details 3...

在jQuery中，我使用的是：$('.counting').html(counting);，但我认为这不是正确的方法，其结果始终相同。

我的意思是，如果添加了额外的2行，则计数显示的是明细2，明细2，但应为明细2，明细3，明细4 ...

我该怎么做？

Answer 1

您可以像这样生成innerHTML

$("body").on("click",".add_button",function(){
   var html = $(".oneway_wrap").first().clone();
   $(html).find(".change").html("<a class='btn btn-danger remove remove_more'>- Remove</a>&nbsp;<button class='btn add_button add_more'><strong>Add More (+)</strong></button>");
   $(".oneway_wrap").last().after(html);

   $('.counting').each(function(i, elm) {
      $(elm).text('Detail ' + (i + 1));
   });
});

Answer 2

您可以使用.length来计数行。请参阅以下代码段。

 var counting = 0;
 $("body").on("click",".add_button",function(){

   // Now i think this is proper way to count rows  :(
   $('.counting').html("Details "+$(document).find(".row").length);

   var html = $(".oneway_wrap").first().clone();
   $(html).find(".change").html("<a class='btn btn-danger remove remove_more'>- Remove</a>&nbsp;<button class='btn add_button add_more'><strong>Add More (+)</strong></button>");
   $(".oneway_wrap").last().after(html);
   counting++;
});

如何显示使用jQuery添加/删除字段添加的字段数量？

2 个答案: