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

我正在使用jQuery添加/删除更多

div

。这是我的密码：

jquery代码：

$(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++;
});

<!-- 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 -->            

$（文档）.ready（函数（）{
$（“#单向”）。单击（函数（）{
$（'.oneway_wrap'）.show（）；
$（'.return_wrap'）.hide（）；
});
});
//添加/删除代码
var计数=0；
$（“正文”）。在（“单击”、“添加”按钮）上，函数（）{
//这不是增加…的正确方法：(
$（'.counting'）.html（计数）；
var html=$（“.oneway_wrap”）.first（）.clone（）；
$（html）.find（“.change”）.html（“-Removeaddmore（+）”；
$（“.oneway_wrap”）.last（）在（html）之后；
计数++；
});

HTML代码：

$(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++;
});

<!-- 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 -->            

详情1


客人姓名
添加更多（+）

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

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

详情1

因此，如果额外添加了两行，那么它将是

Details 2，Details 3…

在jQuery中，我使用的是：

$（'.counting'）.html（counting）；

但我认为这不是一种正确的方法，结果总是一样的

我的意思是，如果增加2行，那么计数显示的是细节2，细节2，但应该是细节2，细节3，细节4

---

如何执行此操作？

您可以使用.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++;
});

var计数=0；
$（“正文”）。在（“单击”、“添加”按钮）上，函数（）{
//现在我认为这是计算行数的正确方法：(
$（'.counting'）.html（“详细信息”+$（文档）.find（“.row”）.length）；
var html=$（“.oneway_wrap”）.first（）.clone（）；
$（html）.find（“.change”）.html（“-Removeaddmore（+）”；
$（“.oneway_wrap”）.last（）在（html）之后；
计数++；
});

您可以像这样生成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));
   });
});

$（“body”）。在（“单击”、“添加”按钮）上，函数（）{
var html=$（“.oneway_wrap”）.first（）.clone（）；
$（html）.find（“.change”）.html（“-Removeaddmore（+）”；
$（“.oneway_wrap”）.last（）在（html）之后；
$（'.counting'）。每个（函数（i，elm）{
$（elm.text（'Detail'+（i+1））；
});
});

让我检查一下。你可以试试这个$（文档）。查找（“.row”）。Length我现在正在检查它。它不知怎么起作用了/不起作用了。我的意思是现在在每个div

中显示详细信息1，详细信息2详细信息3（.one-way\u-wrap）

。它应该在第一部分中显示死神1，在第二部分中显示细节2，在第三部分中显示细节3等等……很抱歉我把你的要求弄错了。我已经更新了我的答案。下面是一个例子哇，太好了，它工作得很好。但是你能告诉我为什么你使用

（I，elm）

？（I，elm）是jquery每个函数的回调参数。您可以在google上搜索jquery。每个函数都可以获得更多信息。希望这一切正常。谢谢